Question

我通常在做出反应时更新状态以在反应中切换图标显示：

  toggle = () => {
    this.setState({
       open: !this.state.open
    })  // setState
  } // toggle callback

现在我看到了一种新方法，建议采用以上方式：

  toggle = () => {
    this.setState((prevState, props) => {
      return {
        open: !prevState.open
      } // return
    })  // setState
  } // toggle callback

在这种情况下，setState函数使用一个更新程序（在这种情况下是一个回调函数），它起作用。 setState函数如何使用更新程序？更新程序props中的第二个参数甚至没有使用，它的用途是什么？

Answer 1

在您的情况下，您可以省略setState的第二个参数，

startCounter = 8;
balls = new ArrayList<>();
int goodBalls=0;
while (goodBalls<amount){
  diameter = random.nextInt(30) + 10 + diameterRange;//generate diameter value for ball
  startCounter += diameter + 25;//stop balls from spawning on top of eachother
  BouncingBall ball = makeBall(startCounter, diameter, i);
  if !(Physics.Collision(ball, balls)||ball.getXPosition()>850||ball.getYPosition()>550){//avoid starting collisions
    balls.add(ball);
    goodBalls++;
  }
}

但是，当您想要根据toggle = () => { this.setState((prevState) => { return { open: !prevState.open } }) }和current props值更新状态时，它非常有用。

另外

prevState

不是回调，而是更新程序功能。根据React文档：

第一个参数是带有签名的更新程序函数：
(prevState) => {
      return {
        open: !prevState.open
      } 
    }
(prevState, props) => stateChange是对先前状态的引用。它不应该直接变异。相反，应该通过构建a来表示更改基于prevState的输入的新对象。对于例如，假设我们想要增加state中的值 prevState and prop
props.step:
更新程序功能收到的this.setState((prevState, props) => { return {counter: prevState.counter + props.step}; });和道具都是保证是最新的。更新程序的输出很浅与prevState合并。

另请参阅Stackoverflow上的这个答案，看看setState回调对什么有用，

When to use React setState callback

Answer 2

我想添加更多信息，为什么建议在setState中使用回调函数。

setState是异步的

React批量状态更改以提高性能，以便state之后setState可能不会立即更改。这意味着您在调用state时不应该依赖当前setState，因为您无法确定该状态是什么！

此外，您的语法可能只是

this.setState(prevState => ({ open: !prevState.open }))

使用React setState的更新程序函数语法

2 个答案: