Question

我正在尝试通过先前的状态值和e.target.value更新状态。

我尝试这样做是因为官方文档建议当我们要使用以前的状态时使用一个函数来更新状态，但出现错误：

“ TypeError：无法读取null的属性'value'”

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是异步的）但是，因为您传递了一个对象，所以该值app.component.ts是立即计算出来的。

前者是正确的方式，但就像您一样使用变量。

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

4 个答案: