如何讓文本動態地隨着React改變，但不能在Render中調用改變？

Question

我正在嘗試構建一個非常簡單的應用程序React，它會告訴您自給定日期以來有多少天過去了。我正在使用React,Moments和ReactJS Datepicker作爲此應用的基礎，以便快速實施。

我發現了一個error當我嘗試選擇一個日期說

warning.js:44 
Warning: setState(...): Cannot update during an existing state transition (such as within 'render' or another component's constructor) 

我明白這意味着我不能有一個功能更新state我目前顯示由於render的問題，但我很難弄清楚如何在不更新render方法的情況下獲得此類功能。

這是當前的應用程序：

import React, { Component } from 'react'; 
 
import DatePicker from 'react-datepicker'; 
 
import moment from 'moment'; 
 
import './App.css'; 
 
import 'react-datepicker/dist/react-datepicker.css'; 
 

 
class App extends Component { 
 
    constructor() { 
 
    super(); 
 
    this.handleChange = this.handleChange.bind(this) 
 
    this.state = { 
 
     startDate: moment(), 
 
     dateDiff: moment(), 
 
     dateCheck: false 
 
    }; 
 
    } 
 
    handleChange(date) { 
 
    this.setState({ 
 
     startDate: date, 
 
     dateCheck: true 
 
    }); 
 
    } 
 
    showDiff(date, dateCheck) { 
 
    if (dateCheck) { 
 
     this.setState({ 
 
     dateCheck: false, 
 
     dateDiff: moment().startOf(date).fromNow() 
 
     }); 
 
    } 
 
    } 
 
    render() { 
 
    return (
 
     <div className="App"> 
 
     <div className="DatePicker"> 
 
      <DatePicker 
 
      selected={this.state.startDate} 
 
      onChange={this.handleChange} 
 
      showYearDropdown 
 
      dateFormatCalendar="MMMM" 
 
      isClearable={true} 
 
      placeholderText='Enter A Date' /> 
 

 
     </div> 
 
     <div> 
 
      {this.showDiff(this.state.startDate, this.state.dateCheck)} 
 
     </div> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
export default App;

我想有它更新每一個新的日期選擇時間的計算天數，並認爲dateCheck標誌會幫助，但它沒有。

謝謝

Answer 1

React自動重新渲染需要更新狀態變化的DOM部分。這個想法是告訴React 什麼你想要它呈現，而不是你想要它如何呈現。

因此，對於您的情況，如果您只是想讓React從現在開始渲染日期差異，則只需在更新時更改startDate。下面是一些代碼，試圖說明我的建議：

import React, { Component } from 'react'; 
import DatePicker from 'react-datepicker'; 
import moment from 'moment'; 
import './App.css'; 
import 'react-datepicker/dist/react-datepicker.css'; 

class App extends Component { 
    constructor() { 
    super(); 
    this.handleChange = this.handleChange.bind(this) 
    this.state = { 
     startDate: moment() 
    }; 
    } 
    handleChange(date) { 
    this.setState({ 
     startDate: date 
    }); 
    } 
    render() { 
    return (
     <div className="App"> 
     <div className="DatePicker"> 
      <DatePicker 
      selected={this.state.startDate} 
      onChange={this.handleChange} 
      showYearDropdown 
      dateFormatCalendar="MMMM" 
      isClearable={true} 
      placeholderText='Enter A Date' /> 
     </div> 
     <div> 
      {this.state.startDate.fromNow()} 
     </div> 
     </div> 
    ); 
    } 
} 

export default App;