功能 setState 在 REACT 中不起作用

Question

My attempts to change the value of the state "id" with setState doesn't work. I've tried using ordinary setState, which doesn't update the value of the state. So I tried a functional setState, but it still doesn't work. The alert shows 0, instead of 5.

Why is it not updating?

class Form extends Component {
 constructor(props){
  super(props);
  this.state = {lat: null,
                lng: null,
                radius: null,
                id: 0,
                filename: ''};
  }
  componentDidMount() {
    function setStateFunction(state, props) {
      const newState = {...state, id: 5};
      return newState;
    }
    this.setState(setStateFunction);

    alert(this.state.id);
  }

  render(){
    return (<div>...</div>);
  }
}

Answer 1

Updating a React component's state is asynchronous. It does not happen immediately.

Since setState is async, the changes might not get reflected as soon as you call it even by passing a function as well. If you want to check whether the value is getting updated or not you can check by using the callback of setState result like below.

componentDidMount() {
    function setStateFunction(state, props) {
      const newState = {...state, id: 5};
      return newState;
    }
    this.setState(setStateFunction, () => {
      alert(this.state.id)
    });
  }

Answer 2

You've got a giant anti-pattern over there. First of all, it does not make sense, to be initializing the state in constructor only to re-initalize it in componentDidMount .

So unless componentDidMount itself is asynchronous, you should never even be using setState inside it (Even the default configuration by the React team actually throws an error in their eslint-react-plugin if you even attempt to do so - which by the way I strongly recommend you install, it's very good for beginners to help prevent common antipatterns or common mistakes).

Not to mention, state itself is asynchronous , so it does not update the moment you change it. Furthermore I presume you're trying to learn here, but just in case this code goes to actual production, you could always simply declare it in constructor

Essentially your code could simply be

class Form extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // rest of your state ...
      id: 5
    }
  }

  componentDidMount() {
    const { id } = this.state
    alert(id)
  }
}

As to the code itself, as I've mentioned, setState is an asynchronous operation, that does update the state instantly. One important rule to remember, any time you set state and want to work with the changed value, you should provide a callback

setState is defined the following way setState(Function => Object | Object, callbackFunction)

So essentially, what you want to be doing in your code is

this.setState(setStateFunction, () => alert(this.state.id))