我如何信任React.js中的状态

Question

So in react, setState() is async, and may buffer calls to change state. I get that. And how you may use setState((state) => {}) like this with an optional callback if you depend on the state in some way for computing the new state.

But lets say i don't want to simply update state, but just be sure of what it actually contains at a certain point in time? Let's do an example:

I have a text field. When someone edits that field it sets state with setState({ hasChanged: true }) . Very well. On a onClick callback (somewhere else) i wanna check if text field is "changed" and save the the textual content of it before moving on. But the thing is i can never really be sure state.hasChanged actually is in sync with reality. Unlike the callback in setState((state) => {}) , i'm on my own here.

So do i create a "shadow state" (or, at least a state variable decoupled from the react state) and keep it updated just for situations such as this? Seems a little cumbersome, and i suspect this is not how you are supposed to do it, hence this question.

EDIT for clarification: i only wish to "check" state and be sure of it's content (because i'm my case, i will do a save-to-disk depending on it). I'm actually not gonna update the state. If that was the case, setState with callback would probably be the right choice..

Answer 1

This is a fairly theoretical question and this will most likely never be a problem for scenario's like the example you gave.

Anyways, you can pass a callback to setState as a second parameter, it will get called as soon as your state has been changed.

Answer 2

That's why React has a lifecycle in which you can listen via methods such as componentWillUpdate , componentDidUpdate , etc (you can check the full list here ). Following your example, when a text field changes, the state value is updated, and you can "intercept" this change within the methods componentWillUpdate and componentDidUpdate like this:

 class Main extends React.Component { constructor(props) { super(props); this.state = { value: '' }; this._handleOnChange = this._handleOnChange.bind(this); } componentWillUpdate(nextProps, nextState) { if(nextState.value !== this.state.value) { console.log('value will update'); } } componentDidUpdate(prevProps, prevState) { if(prevState.value !== this.state.value) { console.log('value did update', this.state.value); } } render() { return ( <form> <input type='text' autoFocus onChange={this._handleOnChange} ref='text'/> </form> ); } _handleOnChange() { this.setState({ value: this.refs.text.value }); } } ReactDOM.render(<Main />, document.getElementById("main")); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="main"></div> 

You can find more info about state and lifecycles in the official docs .

Answer 3

I really think this is a very difficult case to happen. We know that setState only takes a few fractions of a second to execute, and in a real scenario, when the button is clicked, the state has already changed.

In order to be able to fully trust that react is doing a good job, I can think of some ideas:

• You can disable the button when this.state.hasChanged is false. So you should always wait for the next render to check the status of hasChanged and to enable it.

• Use a new key inside state that says lastAction and help of componentDidUpdate to have rules such as:

  if (this.state.lastAction === "myLastAction")