Question

我可以使用axios从nodejs后端获取数据以响应前端。但是我不能在React中将该对象分配给state对象。

getData=()=>{
  let responseToHandle;
  axios.get("http://localhost:9000/api/getData")
    .then(function (response) 
     {
      console.log(response.data);//This is working
      responseToHandle = response.data;
      console.log(responseToHandle);//This is working
      this.setState({
        data: responseToHandle}, () => {
        console.log(this.state.data)
        })
      })



// HERE IS MY STATE OBJECT


state={
  data:[]
}

Answer 1

axios调用和this.setState都是异步的。

您必须在回调中添加所需的代码：

this.setState({
    data: responseToHandle
}, () => {
    console.log(this.state.data)
    // Now you can use this.state.data
});

编辑：

您还需要更改

axios.get("http://localhost:9000/api/getData").then(function (response) { ... })

到

axios.get("http://localhost:9000/api/getData").then(response => { ... })

没有箭头功能，.then()内的范围是function范围，与component范围不同，这意味着使用this会给您带来不同的价值。

Answer 2

此代码无法正常工作：

UpdateView

您在诺言声明之后立即同步调用了class EventUpdate(UpdateView, request):函数。 Promise异步工作。

因此，要检查新状态，应使用console.log(this.state.data)方法调用console.log，否则最好的选择是使用console.log方法。

例如

render()

如何将响应对象分配给状态

2 个答案: