React：输入 onChange 以更新状态步骤落后

Posted 2023-02-22

【中文标题】React：输入 onChange 以更新状态步骤落后

【英文标题】：React: Input onChange to update state step behind

【发布时间】：2019-04-05 17:57:26

【问题描述】：

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

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

问题 2 - 如果没有 event.persist，事件是“合成的”并且不包含值。保留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: '',

【参考方案1】：

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

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

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