调用setState更新程序时this.state当前吗？

Question

我知道完全更新的状态会传递给setState的回调。不过，我想知道这个.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 }; 
  });
};

编辑

我现在意识到我所说的“回调”实际上被称为“更新程序”。很抱歉给你带来了困惑。

Answer 1

在您的案例中，似乎不需要setState回调。

从这里，您可以这样调用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
};

Answer 2

我认为应该行得通。语法也有点不同于您使用的语法。在上面的示例中，您没有使用回调，而是使用setState方法的功能约定。请参阅React JS文档以了解更多信息。此外，下面的代码片段可能会提供一种更好的方法来实现您想要实现的目标。

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