Question

在componentDidMount（）中，我调用setQueryParams将查询参数设置为状态正常。

 componentDidMount() {
    this.setQueryParams();

    console.log(this.state.query);

    $.getJSON(`/search?${this.state.query}`, (response) => {
      this.addDiveCenters(response.centers)
      this.buildFilters(response.filters, false)
    });

    console.log(this.state.query);
  }

但是，在setQueryParams()来电后，console.log(this.state.query)正在返回＆＃39;＆＃39; （默认状态）。页面加载后，我可以运行$ r.state.query，一切都很完美，但由于某种原因，我无法访问该状态！我需要初始状态来进行AJAX调用。现在，每个页面加载到/search，因为this.state.query为空。

 setQueryParams = (param = null, value = null) => {
    const query = this.state.query;
    // get current location
    const location = this.props.location.search;

    // Set params based on whether component mount or filter change
    const params = param ? new URLSearchParams(query) : new URLSearchParams(location);

    if (param) {
      params.set(param, value);
    }

    this.setState({
      query: params.toString()
    });

    console.log(this.state.query); // doesn't display anything!
  }

Answer 1

这需要一些时间，因为apt-get install A行为this.setState

asynchronous具有回调方法，该方法通知状态已更新

this.setState

阅读本文

https://medium.com/@wereHamster/beware-react-setstate-is-asynchronous-ce87ef1a9cf3

解决方案： -

 this.setState({
      query: params.toString()
    },() => { 
    // Do something here. 
  });

在setQueryParams中传递回调方法

componentDidMount() {

    this.setQueryParams(null, null, () => {

        console.log(this.state.query);

        $.getJSON(`/search?${this.state.query}`, (response) => {
            this.addDiveCenters(response.centers)
            this.buildFilters(response.filters, false)
        });

        console.log(this.state.query);
    });
}

Answer 2

State Updates May Be Asynchronous

Answer 3

setState是一个异步函数，所以它有时间将你的值设置为状态，当你记录状态值时，新的值还没有设置。

Answer 4

来自react docs：

将setState（）视为请求而不是更新组件的立即命令。为了获得更好的感知性能，React可能会延迟它，然后在一次通过中更新几个组件。 React不保证立即应用状态更改。

这就是为什么你没有立即得到你期望的答案。但是，有些令人困惑的是，有时候设置状态是立即的。但是，你永远不应该期待它。

由于状态更改是异步的，所以react通过回调提供了一种方法， ahem ，在状态发生变化后作出反应。所以你可以写这样的代码：

this.setState({
  query: params
},(updatedState) => { 
 console.log("updated state:", updatedState)
});

无法从ComponentDidMount（）访问状态

4 个答案: