如何在我的示例中正确使用 setState()？

Posted 2023-02-21

【中文标题】如何在我的示例中正确使用 setState()？

【英文标题】：How to properly use setState() in my example?

【发布时间】：2019-12-12 08:27:44

【问题描述】：

为了避免出现警告消息，更新this.state.processDuration 的正确方法是什么？：

不要直接改变状态。使用 setState() 反应/无直接突变状态

  fetchData = () => 
      this.setState(
        this.state.processDuration = (new Date(this.state.endTime)-new Date(this.state.endDate)) / 60000
      )
  

【问题讨论】：

this.setState( processDuration : (new Date(this.state.endTime)-new Date(this.state.endDate)) / 60000 )

@Nemer：如果我在this.setState(...” 之后写console.log(this.state.processDuration)，那么this.state.processDuration 的值不会更新。为什么会发生？如果我这样做this.state.processDuration = (new Date...)，那么一切正常（警告消息除外）。

【参考方案1】：

setState 接收带有您要更新的键/值的对象作为参数。

您可以查看setState() docs 以获取更多示例。

像这样使用它：

   fetchData = () => 
          this.setState(
            processDuration: (new Date(this.state.endTime)-new Date(this.state.endDate)) / 60000
          )
      

因为设置状态是asynchronous，并且你使用当前状态，所以建议你使用updater函数而不是传递一个Object。

   fetchData = () => 
          this.setState((state) => (
               processDuration: (new Date(state.endTime)-new Date(state.endDate)) / 60000   
          ));
      

如果你想在状态改变后做一些事情，你可以传递一个可选的回调，它将在状态更新和组件重新渲染后调用：

      this.setState(
         // Updater function, has current state/props as parameters
         (state, props) => (
              processDuration: (new Date(state.endTime)-new Date(state.endDate)) / 60000   
         ), 
         // V -- This will be called after state was updated
         () =>  console.log('State was updated!', this.state); 
      )

【讨论】：

如果我在this.setState(...” 之后写console.log(this.state.processDuration)，那么this.state.processDuration 的值不会更新。为什么会发生？如果我这样做this.state.processDuration = (new Date...)，那么一切正常（警告消息除外）。

@ScalaBoy 设置状态为asynchronous，因此更改不会立即发生，但可以在未来的任何时间发生（通常发生得很快，在接下来的几毫秒内）。所以setState 只是告诉 React，“嘿，将 state.x 更改为 5”，React 会尽快更改它，但不会立即更改以提高应用程序性能。如果您只想在状态更改后记录某些内容，setState 还会收到另一个回调参数，称为 after 状态更改。

我测试了第二种方法。问题是一样的。更新processDuration 的值需要一些时间，但我需要立即完成（应该和this.state.processDuration = (new Date ...) 一样快）。

那么，更新完成后如何执行console.log（以及fetchData中的其他代码）？

谢谢@Cristy！请你支持我的问题，因为我不认为被否决是那么原始。