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

Question

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

setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.

现在我有这样一个组件：

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>
        );
    }

}

我想知道的是，由于 setState 不会立即更新 state，我怎么知道我保存在 saveNoteButton_press 中的笔记是否是当前版本国家的？是否有一些回调或我可以轮询的东西以了解 state 是否已完全更新？

Answer 1

他们警告的是试图在同一个事件循环中做某事。

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

或 setState 使用之前的状态：

method = () => {
  let note = this.state.note // possible that `this.state.note` is scheduled to change
  this.setState({ note: note + 'B' })
}

由于您的用户将在 setState 调度后按下按钮，状态将已经更新。

..但是为了理论的缘故，让我们假设输入事件和按钮以某种方式发生在同一时刻..正确的解决方案是什么？如果它是单个函数调用，您可能不会使用新状态，因为您已经有了新音符和以前的状态。

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
  )
}

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

How to know if all the setState updates have been applied to the state in a React component?

state

asynchronous

ecmascript-6

reactjs