我想了解 ReactJS 中的 SetState 和 Prevstate

Question

我是 ReactJS 的新手，我在我的项目中使用向导表单，它使用户能够执行下一步和上一步。我为下一个按钮复制了一些代码，但老实说不明白这是什么意思。

你能帮我理解下面的代码吗：

next() {
    this.setState(prevState => ({ current: prevState.current + 1 }));
}

Answer 1

感谢您的贡献。

正如 cmets 中所建议的，您可能应该看看 documentation，但由于您是新贡献者，我想我会尝试回答您的问题。

State 和 setState 的工作原理

每个组件反应类都有一个“状态”。当“状态”更新时，组件将重新渲染。 setState 是用于更新组件状态的方法。 this 指的是组件本身。

您的组件state 对象最初可能如下所示：{ current: 0, something: 'foo' }。

next() 在做什么

当您调用next() 时，也会调用setState。 setState 通过回调调用。回调提供了一个参数，这里命名为prevState - prevState 是组件上的当前state，所以{ current: 0, something: 'foo' }。

setState 的返回值将设置状态对象上提供的任何字段。调用this.setState后，component.state的新值为{ current: 1, something: 'foo' }。

重新渲染

将触发组件的重新渲染，因为新状态和先前状态对象的浅比较将返回false。

希望这会有所帮助！

Answer 2

正如我在评论中提到的，您需要查看文档本身以了解有关 how setState works 的更多信息。

此外，我想说明我们为什么需要它？

在反应状态是不可变的，即。说你不能直接改变状态：

state = { current: 1 }
// ...and somewhere in your code
this.state.current = 2 // won't work
this.state.current = this.state.current + 1 // also, no luck
console.log(this.state.current) // 1
// the reason is immutable

因此，您需要在不改变状态的情况下更新状态。因此，react 让我们公开使用 setState。

setState 有两个参数：updater 和 callback。

更新程序可以接受状态和道具。这样您就可以根据状态和道具或您想要的其他方式更新状态检查其条件。

回调是在 setState 中提供的，因此您可能知道它的效果，就像现在的 current 一样。请参阅下面的示例：

this.setState((state, props) => { // previous state, previous props
  // you may additionally check some condition
  // or combine state and props
  // like, state.current + props.value
  return { current: state.current + 1 }
}, () => {
// ^^- callback
  console.log(this.state.current)
})

顺便说一句，使用 setState 有一些不同的选项：

a) without updater and callback
eg. setState({current: 2})
b) with updater param only
eg. setState(()=>({current: 2}))
c) with updater and callback
eg. see preceding example of code
d) without updater but with callback
eg.  setState({current: 2},()=>console.log(this.state.current))