功能 setState 在 REACT 中不起作用

Question

我尝试使用 setState 更改 state“id”的值不起作用。 我试过使用普通的 setState，它不会更新 state 的值。 所以我尝试了一个功能性的setState，但它仍然不起作用。 警报显示 0，而不是 5。

为什么不更新？

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

更新 React 组件的 state 是异步的。 它不会立即发生。

由于setState是异步的，因此即使通过 function 调用它，更改也可能不会立即反映。 如果要检查值是否正在更新，可以使用setState结果的回调进行检查，如下所示。

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

Answer 2

你那里有一个巨大的反模式。 首先，在constructor中初始化state只是为了在componentDidMount中重新初始化它是没有意义的。

因此，除非componentDidMount本身是异步的，否则您甚至都不应该在其中使用setState （如果您尝试这样做，即使 React 团队的默认配置实际上也会在他们的eslint-react-plugin中引发错误 - 顺便说一句，我强烈推荐你安装，非常适合初学者帮助防止常见的反模式或常见错误）。

更何况， state本身是异步的，所以你一改它就不会更新。 此外，我假设您正在尝试在这里学习，但是以防万一此代码用于实际生产，您总是可以简单地在构造函数中声明它

本质上，您的代码可能只是

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

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

至于代码本身，正如我所提到的， setState是一个异步操作，它会立即更新 state。 要记住的一条重要规则，任何时候设置 state 并希望使用更改后的值，都应该提供回调

setState setState(Function => Object | Object, callbackFunction)如下

所以本质上，你想在你的代码中做的是

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