更新状态的正确方法是什么，其值需要是先前状态和事件的组合

Question

我正在尝试通过之前的状态值和 e.target.value.

更新状态

我尝试这样做是因为官方文档建议我们在使用之前的状态时使用更新状态的函数但是我得到了一个错误：

"TypeError: Cannot read property 'value' of null"

state = {
        expression : '',
        result : 0
}
handleClick = (e) => {
    this.setState(state => ({ expression: state.expression + e.target.value}))
}

但是当我尝试这样做时，它正在成功更新状态

state = {
        expression : '',
        result : 0
}
handleClick = (e) => {
    let a = e.target.value;
    this.setState(state => ({ expression: state.expression + a}))
}

我知道问题不在于 setState，而在于事件处理下面是另一种方法，但 react 的官方文档不推荐使用以前的状态

state = {
        expression : '',
        result : 0
}
handleClick = (e) => {
    this.setState({ expression: this.state.expression + e.target.value})
}

当我们想要先前的状态值和事件值时，正确的做法是什么。

我的组件

<h4>{this.state.expression}</h4>

<Button value='2' onClick={this.handleClick}  variant='outline-primary' block>2</Button>

Answer 1

您可以通过这种方式更新您的状态：

state = {
        expression : '',
        result : 0
}
handleClick = (e) => {
    e.preventDefault()
    this.setState({ expression: ...this.state.expression, e.target.value})
}

如您所见，我添加了 e.preventDefault() 以防止页面执行任何操作（例如重新加载）。

Answer 2

添加e.persist();在你的 handleClick 函数中，即

handleClick = (e) => {
    e.persist()
    this.setState({ expression: e.target.value })
}

Answer 3

如你所想，将值保存到变量中然后使用它是正确的方法。

handleClick = (e) => {
    const {value} = e.target
    this.setState(state => ({ expression: state.expression + value}))
}

需要将其保存到 var 的原因是当您将 setState 与函数一起使用时，该函数会在事件结束后执行。

Answer 4

setState 本质上是异步的，因此不能保证更新会立即发生。

两者的区别

this.setState(state => ({ expression: state.expression + e.target.value}))

和

this.setState({ expression: this.state.expression + e.target.value})

是前者setState提供的回调函数是异步执行的，即在事件结束后调用。除了后者可能具有 this.state.expression 的陈旧值之外，这就是为什么不建议在此处使用它的原因。

后面state的实际更新也会在事件结束后进行（因为setState是异步的）但是因为你通过了一个对象，因此立即计算值 e.target.value。

正确的方法是前者，但就像您所做的那样使用变量。

更新状态的正确方法是什么，其值需要是先前状态和事件的组合

What is the correct way of updating state for which the value needed to be a combination of previous state and event

javascript

state

dom-events

reactjs