Javascript 我想了解ReactJS中的SetState和Prevstate
我是ReactJS新手,我在我的项目中使用向导表单,使用户可以执行下一步和上一步。我复制了一些“下一步”按钮的代码,但我真的不明白它的意思 你能帮我理解以下代码吗Javascript 我想了解ReactJS中的SetState和Prevstate,javascript,reactjs,Javascript,Reactjs,我是ReactJS新手,我在我的项目中使用向导表单,使用户可以执行下一步和上一步。我复制了一些“下一步”按钮的代码,但我真的不明白它的意思 你能帮我理解以下代码吗 next() { this.setState(prevState => ({ current: prevState.current + 1 })); } 谢谢你的贡献 正如评论中所建议的那样,您可能应该看看,但是由于您是一名新的投稿人,我想我会尝试回答您的问题 状态和设置状态如何工作 每个组件类都有一个“状态”。当“状
next() {
this.setState(prevState => ({ current: prevState.current + 1 }));
}
谢谢你的贡献 正如评论中所建议的那样,您可能应该看看,但是由于您是一名新的投稿人,我想我会尝试回答您的问题 状态和设置状态如何工作 每个组件类都有一个“状态”。当“状态”更新时,组件将重新呈现<代码>设置状态是用于更新组件状态的方法<代码>此指的是组件本身 您的组件
状态
对象最初可能如下所示:{current:0,something:'foo'}
下一步()在做什么
调用next()
时,也将调用setState
<代码>设置状态通过回调调用。回调提供了一个参数,这里名为prevState
-prevState是组件上的当前状态
,因此{current:0,something:'foo'}
setState
的返回值将设置状态对象上提供的任何字段。调用this.setState
后,component.state
的新值将是{current:1,something:'foo'}
重新渲染
将触发组件的重新渲染,因为对新状态和以前状态对象的粗略比较将返回false
希望这有帮助 正如我在评论中提到的,您需要查看文档本身以了解更多信息 在这里,我想进一步说明为什么我们需要它 在react中,状态是不可变的,也就是说,您不能直接更改状态,如:
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中提供,因此您可能知道它的效果,就像当前的一样。请参见下面的示例:
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)
})
顺便说一句,有一些不同的选项可以使用设置状态:
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))
你看过报纸了吗?它有你需要知道的一切。即使你读了这篇文章后没有得到什么东西,你也可以在特定的部分提问。你现在期待什么?@bhojendraurauniyar你需要更清楚地回答你的问题。谢谢你的讲解。作为初学者,通常很难正确解释文档。有一段时间我被文档难住了,我认为prevState是我需要提供的东西,而不是为我提供的东西。你能解释一下嵌套在其中的箭头函数吗?ie为什么不能删除prevState=>
?是不是setState的参数必须是一个函数,并且setState将以当前状态作为其参数提供此函数?因此,如果setState的参数是一个函数,则setState将以当前状态作为其参数提供此函数?