Question

我需要从ajax响应更新状态变量。我试过下面的

componentDidMount() {
   var parent_object=this;
          axios.get('/template.php')
                  .then((result)=> {
                      console.log(result.data);

   parent_object.setState({component_template:result.data})//not updating

                  });

    console.log("here");
    console.log(this.state.component_template);
}

我可以看到result.data的数组，但状态变量component_template未更新

我试过了 How to set state of response from axios in react 和 https://daveceddia.com/ajax-requests-in-react/ 但没有运气

Answer 1

React setState是异步的！您可以在状态值更新后调用回调函数：

componentDidMount() {
      axios.get('/template.php')
              .then((result)=> {
               console.log(result.data);
                this.setState({component_template:result.data},()=>{
                   console.log(this.state.component_template);
                 })

      });

}

Answer 2

来自docs：

setState（）并不总是立即更新组件。它可以批量推迟更新或推迟更新。这使得在调用setState（）之后立即读取this.state是一个潜在的陷阱。相反，使用componentDidUpdate或setState回调（setState（更新程序，回调）），其中任何一个都保证在应用更新后触发。

因此状态可能正在正确更新，但是您的console.log可能无法读取更新的值。尝试使用回调，或在componentDidUpdate内查看。

Answer 3

反应中的setState是异步调用。 setSate之后的控制台不保证更新的值。

使用setState作为回调添加控制台，或者在render方法内添加控制台作为第一行以检查更新的状态值。

从componentdidmount -react上的ajax调用更新状态

3 个答案: