Javascript 如何使用React动态更改文本，而不调用Render中的更改？

我正在尝试使用

React

构建一个非常简单的应用程序，它将告诉您自给定日期起已经过去了多少天。我使用的是<代码>反应<代码>，<代码>时刻，和<代码> ReACTJS DATEPICKER < /代码>作为这个应用程序快速实现的基础。p> 当我试图选择一个日期时，我得到了一个

错误

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

我理解这意味着由于
渲染
问题，我无法更新当前显示的
状态
，但我很难弄清楚如何在不使用
渲染
方法更新的情况下获得此类功能

这是当前的应用程序：


import React，{Component}来自'React'；
从“react DatePicker”导入日期选择器；
从“力矩”中导入力矩；
导入“/App.css”；
导入'react datepicker/dist/react datepicker.css'；
类应用程序扩展组件{
构造函数（）{
超级（）；
this.handleChange=this.handleChange.bind（this）
此.state={
起始日期：力矩（），
dateDiff:moment（），
日期检查：假
};
}
手册更改（日期）{
这是我的国家({
开始日期：，
日期检查：正确
});
}
showDiff（日期，日期检查）{
如果（日期检查）{
这是我的国家({
日期检查：假，
dateDiff:moment（）.startOf（date）.fromNow（）
});
}
}
render（）{
返回(
{this.showDiff（this.state.startDate，this.state.dateCheck）}
);
}
}
导出默认应用程序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;

import React，{Component}来自'React'；
从“react DatePicker”导入日期选择器；
从“力矩”中导入力矩；
导入“/App.css”；
导入'react datepicker/dist/react datepicker.css'；
类应用程序扩展组件{
构造函数（）{
超级（）；
this.handleChange=this.handleChange.bind（this）
此.state={
开始日期：时刻（）
};
}
手册更改（日期）{
这是我的国家({
开始日期：日期
});
}
render（）{
返回(
{this.state.startDate.fromNow（）}
);
}
}
导出默认应用程序；
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;

import React，{Component}来自'React'；
从“react DatePicker”导入日期选择器；
从“力矩”中导入力矩；
导入“/App.css”；
导入'react datepicker/dist/react datepicker.css'；
类应用程序扩展组件{
构造函数（）{
超级（）；
this.handleChange=this.handleChange.bind（this）
此.state={
开始日期：时刻（）
};
}
手册更改（日期）{
这是我的国家({
开始日期：日期
});
}
render（）{
返回(
{this.state.startDate.fromNow（）}
);
}
}
导出默认应用程序；
太棒了！我太傻了，没有意识到：（我会将您的帖子标记为答案，但对于尝试这样做的人，我犯了另一个错误，将dateDiff初始化为矩对象，并且
fromNow
函数返回一个生成错误的字符串。只需使
dateDiff:“
修复了问题。文本现在显示正确，但实际上不会更新。）不管我选择的日期是什么，我都会说几秒钟后：（编辑*我不得不添加另一行，让datePicker知道在同一个
setState
调用中显示的日期
startDate:date
。啊，我现在明白了代码试图做什么。我最初只是回答概念，而不是考虑其背后的逻辑。我现在已经修改了它-尝试一下，让我知道这是否有效：）太棒了！是的，我知道你现在是怎么做到的。非常感谢：）编辑*现在我觉得很可笑！我最初的想法是，我可以告诉你从现在到某个特定日期之间有多少天，但在我进入生日后，它几年后就把它给了我……回到了绘图板上！对于任何感兴趣的人：我添加了一个新的初始状态
今天：矩（）.startOf（'day'）
而不是
this.state.startDate.fromNow（）
我做了
this.state.startDate.diff（this.state.today，'days'）
希望这有帮助！Karin已经回答了这个问题。但是作为一条规则-不要从renderAwesome触发状态更改！我太愚蠢了，没有意识到：（我会将您的帖子标记为答案，但对于尝试这样做的人，我犯了另一个错误，将dateDiff初始化为矩对象，并且
fromNow
函数返回一个生成错误的字符串。只需使
dateDiff:“
修复了问题。文本现在显示正确，但实际上不会更新。）不管我选择的日期是什么，我都会说几秒钟后：（编辑*我不得不添加另一行，让datePicker知道在同一个
setState
调用中显示的日期
startDate:date
。啊，我现在明白了代码试图做什么。我最初只是回答概念，而不是考虑其背后的逻辑。我现在已经修改了它-尝试一下，让我知道这是否有效）太棒了！是的，我明白了