Reactjs 如何知道是否已将所有setState更新应用于React组件中的状态？

我正在阅读关于React的文档，其中说：

setState（）不会立即改变this.state，但会创建挂起的状态转换。调用此方法后访问this.state可能会返回现有值

现在我有了一个类似这样的组件：

class NoteScreenComponent extends React.Component {

    constructor() {
        super();
        this.state = { note: Note.newNote() }
    }

    componentWillMount() {
        this.setState({ note: this.props.note });
    }

    noteComponent_change = (propName, propValue) => {
        this.setState((prevState, props) => {
            let note = Object.assign({}, prevState.note);
            note[propName] = propValue;
            return { note: note }
        });
    }

    title_changeText = (text) => {
        this.noteComponent_change('title', text);
    }

    body_changeText = (text) => {
        this.noteComponent_change('body', text);
    }

    saveNoteButton_press = () => {
        // Save note to SQL database
        Note.save(this.state.note)
    }

    render() {
        return (
            <View>
                <TextInput value={this.state.note.title} onChangeText={this.title_changeText} />
                <TextInput value={this.state.note.body}  onChangeText={this.body_changeText} />
                <Button title="Save note" onPress={this.saveNoteButton_press} />
            </View>
        );
    }

}

class-NoteScreenComponent扩展了React.Component{
构造函数（）{
超级（）；
this.state={note:note.newNote（）}
}
组件willmount（）{
this.setState（{note:this.props.note}）；
}
noteComponent_change=（propName，propValue）=>{
this.setState（（prevState，props）=>{
让note=Object.assign（{}，prevState.note）；
注[propName]=propValue；
返回{note:note}
});
}
标题\更改文本=（文本）=>{
本条注释内容变更（“标题”，文本）；
}
正文\u changeText=（文本）=>{
此.note组件更改（'正文'，文本）；
}
saveNoteButton_按=（）=>{
//将注释保存到SQL数据库
Note.save（this.state.Note）
}
render（）{
返回(
);
}
}

---

我想知道的是，既然

setState

不会立即更新

状态

，我怎么知道我保存在

saveNoteButton\u按下

的便笺是否是状态的当前版本？是否有一些回调或我可以轮询的东西，以了解

状态是否已完全更新？
他们警告的是试图在同一事件循环中执行某些操作

method = () => {
  this.setState({ note: 'A' })
  saveNote(this.state.note) // <-- this.state.note will not have been updated yet.
}

由于用户将在设置状态计划后按下按钮，因此状态将已更新

…但从理论上讲，让我们想象一下，不知何故，输入事件和按钮发生在同一时刻。。正确的解决方案是什么？如果是单个函数调用，您可能不会使用新状态，因为您已经有了新注释和以前的状态

method = (text) => {
  let noteToSave = this.state.note + text // old state + new value

  saveNote(noteToSave) // maybe this will fail
    .then(response => this.setState({ note: noteToSave }))
    .catch(err => this.setState({ error: 'something went wrong' }))

  // optimistically update the ui
  this.setState({ note: noteToSave }) 
}

但最有可能的解决方案可能是将所需内容作为参数传递到使用它的位置，而不是尝试访问可能处于竞争状态的状态，因为任何状态转换之后都会发生
render

method = (note) => {
  noteToSave(note)
}

render() {
  return (
    <Button onPress={() => this.method(this.state.note)} /> <-- must be up to date here
  )
}

method=（注意）=>{
noteToSave（注）
}
render（）{
返回(
this.method（this.state.note）}/>在告诉您状态更新完成的回调中，
render（）
怎么样？我们知道它已经准备好了，对吗？
method = (note) => {
  noteToSave(note)
}

render() {
  return (
    <Button onPress={() => this.method(this.state.note)} /> <-- must be up to date here
  )
}