Question

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

请勿直接更改状态。使用setState（）反应/无直接突变状态

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

Answer 1

setState接收一个对象，该对象包含要更新的键/值。

您可以浏览setState() docs以获得更多示例。

像这样使用它：

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

由于设置状态为asynchronous，并且您使用的是当前状态，因此建议您使用更新程序功能，而不要传递对象。

   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); }
      )

如何在我的示例中正确使用setState（）？

1 个答案: