React：输入onChange更新state step behind

Question

我有一个带有 onChange 属性的输入，它调用一个函数 handleChange，它使用在输入中键入的新值更新状态。

问题 1 - 当在 handleChange 末尾记录状态时，它包含旧状态，或者后面有一个输入字母（将记录 'ca'当您键入 'cat' 时）。

问题 2 - 没有 event.persist 事件是 'synthetic' 并且不包含值。保留 persist 是否可以接受，还是应该采用不同的结构？

输入有：

onChange={this.handleChange}

调用函数：

handleChange = (event) => {
    event.persist() // without this the event is 'synthetic'

    const newTerms = {...this.state.terms}
    newTerms.text = event.target.value

    this.setState({terms: newTerms})

    console.log('state', this.state) //logs the previous state
}

this.state.terms.text应该改成：

this.state = {
    terms: {
        text: '',

Answer 1

状态更新是异步的。你要的是这个：

this.setState({terms: newTerms}, () => console.log('state', this.state))

即使没有 persist，事件也包含事件处理程序中的值。这仅适用于同步上下文，因此您不应将事件传递给 setState 或其他异步方法。

React：输入onChange更新state step behind

React: Input onChange to update state step behind

state

input

onchange

reactjs