功能性 setState 在 REACT 中不起作用

Question

我尝试使用 setState 更改状态“id”的值，但没有成功。我试过使用普通的 setState，它不会更新状态的值。所以我尝试了一个功能性的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 组件的状态是异步的。它不会立即发生。

由于 setState 是异步的，即使通过传递函数，更改也可能不会在您调用它时立即反映出来。如果您想检查该值是否正在更新，您可以使用 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 是一个异步操作，它会立即更新状态。要记住一个重要的规则，任何时候你设置状态并想要使用更改后的值，你应该提供一个回调

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

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

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

功能性 setState 在 REACT 中不起作用

Functional setState doesn't work in REACT

javascript

setstate

reactjs