调用 setState 更新程序时 this.state 是否为当前状态？答案

【问题标题】：Is this.state current when the setState updater is called?调用 setState 更新程序时 this.state 是否为当前状态？
【发布时间】：2021-08-05 04:46:12
【问题描述】：

我了解完全更新的状态会传递给 setState 的回调。不过，我想知道 this.state 当时是否也是最新的。原因是我有一个使用 this.state 的方法，我想知道从回调内部调用是否安全。示例：

areWeBigger = () => {
  const { theirSize } = this.props;
  const { ourSize } = this.state;

  return ourSize > theirSize;
};

attemptToEat = () => {
  this.setState(({ ourSize }) => {
    const bigger = this.areWeBigger(); // Is this safe?

    return { ourSize: bigger ? ourSize + 1 : ourSize - 1 }; 
  });
};

编辑

我现在意识到我一直称之为“回调”的东西实际上被称为“更新程序”。很抱歉造成混乱。

【问题讨论】：

对不起，我只想说清楚。您也在谈论 this.state，而不仅仅是 state 参数，对吗？
this.areWeBigger() 是在状态改变之前。 this.setState(param1, param2)，其中 param1 只知道当前状态，而 param2（回调）是更新后的状态。
如果您不使用对象解构语法将参数传递给状态更新程序函数，您的示例将更具可读性和更易于理解。

标签： reactjs

【解决方案1】：

您的情况似乎不需要 setState 回调。

从here，你可以这样调用setState：

this.setState((prevState, props) => {
  return {counter: prevState.counter + props.step};
})

所以你可以像这样调用你的 areWeBigger 函数：

areWeBigger = (ourSize , theirSize ) => {
  return ourSize > theirSize;
};

attemptToEat = () => {
  this.setState(({ ourSize }, {theirSize }) => { //extract ourSize and theiSize from (current)state and props respectively
    const bigger = this.areWeBigger(ourSize, theirSize ); // this is before the state is updated
    return { ourSize: bigger ? ourSize + 1 : ourSize - 1 }; 
  });
};

通过“areWeBigger”中的直接状态访问来保持您的方式：

areWeBigger = () => {
  const {ourSize} = this.state;
  const {theirSize} = this.props;
  return ourSize > theirSize;
};

callback = () => {
  // ... here the state is up to date
}

attemptToEat = () => {
  this.setState(({ ourSize }) => { //extract ourSize and theiSize from (current)state and props respectively
    const bigger = this.areWeBigger(); // this is before the state is updated
    return { ourSize: bigger ? ourSize + 1 : ourSize - 1 }; 
  }, callback); // to see the use of callback
};

【讨论】：

抱歉，我的术语已关闭。我实际上是指“更新程序”，而不是“回调”。我确实意识到我可以按照您的示例进行操作，谢谢。但是，areWeBigger() 方法在我的组件中的多个位置被调用。如果 this.state 可以简单地在其中访问（无需为每次出现传递参数），它会更干净。似乎有可能（甚至可能） prevState 只是为了方便而存在，因为您总是要访问更新程序中的状态。因此，我的问题是我是否可以在不将参数传递给 areWeBigger() 的情况下执行上述操作。

【解决方案2】：

我认为它应该有效。语法也与您使用的有点不同。您没有在上面的示例中使用callback，而是使用setState 方法的功能约定。请参阅React JS Documentation 了解更多信息。此外，以下 sn-p 可能会为您尝试实现的目标提供更好的方法。

const areWeBigger = () => {
  const { theirSize } = this.props;
  const { ourSize } = this.state;
  return ourSize > theirSize;
};

const attemptToEat = () => {
  this.setState({ ourSize: "whatever value" }, () => {
    const bigger = this.areWeBigger(); // it is okay to use this
    // it doesn't return anything, that is not supported so remove your return statement
    // ideally you can also use componentDidUpdate lifecycle method if you don't want to always trigger a callback, you can refer react docs.
  })
     
  });
};

【讨论】：