Question

因此，我读到很多内容，即setState调用是成批的并且是异步的，并且从setState的状态中读取任何值时，应该使用updater函数来更新状态。

class App extends React.Component {
  state = { count: 1 }
  handleClick = () => {
    this.setState({ count: this.state.count + 1 }) 
  }

  render() {
    return (
      <div>
        <div>{this.state.count}</div>
        <button onClick={this.handleClick}>Click</button>
      </div>
    )
  }
}

仅考虑以上代码，有人可以通过不使用setState的更新程序模式来解释在这种情况下可能出什么问题吗？即使稍后再调用setState，this.state也将始终引用以前的状态，这就是我们在这里要的。

PS：我知道一个接一个地多次调用setState会在这种情况下引起错误，因为它们是异步的，但是这里不是这种情况。

Answer 1

您不应执行此操作的一个原因是setStates异步行为。例如，如果在一个函数中有两个setState，则不会获得所需的输出。考虑一下：

handleClick(){
    this.setState({
        count : this.state.count + 1
    })
    this.setState({
        count : this.state.count + 1
    })
}

如果您登录this.state.count，现在其值将仅增加1，但是如果您这样做，则：

handleClick(){
    this.setState((prevState)=>({
        amount : prevState.count + 1
    }))
    this.setState((prevState)=>({
        amount : prevState.count + 1
    }))
}

您将获得正确的输出。

还

调用setState时不会立即更新DOM。相反，React将多个更新批处理为一个更新，然后呈现DOM。查询状态对象How to NOT React
时，您可能会收到过时的值

编辑：我刚刚看到了您问题的最后一段，似乎我的回答正是您所说的，已经知道了！在那种情况下，我认为它只是尊重良好做法。

反应setState的正确用法

1 个答案: