Javascript 为什么无法在componentDidMount中访问ReactJS状态

我使用

axios

从

MongoDB

数据库中提取数据，并将值设置为

状态

名为发票的值

我在

componentDidMount

中执行此操作。我想再次访问

组件didmount

中的状态（即发票）。我正在尝试将

发票

值设置为另一个名为

dataa

的

状态

值。但最终总是得到空/空

问题是尚未设置状态，值为空

这就是我的代码片段的样子：

componentDidMount() {

axios
  .get("http://localhost:4005/purchaseinvoices")
  .then(response => {
    this.setState({
      invoices: response.data //setting value to invoices
    });
  })
  .then(
    this.setState({
      dataa: this.state.invoices //setting value to dataa
    })
  )
  .catch(err => {
    console.log(err);
  });

  //but this gives 0
  alert(this.state.invoices.length)

}

---

问题的可能原因是什么？如何解决此问题？

这是因为

axios

和

setState

是异步的

但是，您可以在

componentdiddupdate

或

render

函数中看到更新

编辑：您还可以访问以下更新的内容

axios
  .get("http://localhost:4005/purchaseinvoices")
  .then(response => {
    this.setState({
      invoices: response.data, //setting value to invoices
      dataa: response.data
    }, () => {
      alert(this.state.invoices.length)
    });
  })
  .catch(err => {
    console.log(err);
  });
}

---

这是因为

axios

和

setState

是异步的

但是，您可以在

componentdiddupdate

或

render

函数中看到更新

编辑：您还可以访问以下更新的内容

axios
  .get("http://localhost:4005/purchaseinvoices")
  .then(response => {
    this.setState({
      invoices: response.data, //setting value to invoices
      dataa: response.data
    }, () => {
      alert(this.state.invoices.length)
    });
  })
  .catch(err => {
    console.log(err);
  });
}

---

直接从响应更新数据，而不是使用this.state.invoices。由于this.setState是一个异步调用，因此更新状态需要一些毫秒延迟

 componentDidMount() {
    axios
      .get("http://localhost:4005/purchaseinvoices")
      .then(response => {
        this.setState({
          invoices: response.data //setting value to invoices
          data: response.data
        });

      })
      .catch(err => {
        console.log(err);
      });


    }

---

如果要在第一次加载页面时查看数据，请尝试服务器端呈现直接从响应更新数据，而不是使用this.state.invoices。由于this.setState是一个异步调用，因此更新状态需要一些毫秒延迟

 componentDidMount() {
    axios
      .get("http://localhost:4005/purchaseinvoices")
      .then(response => {
        this.setState({
          invoices: response.data //setting value to invoices
          data: response.data
        });

      })
      .catch(err => {
        console.log(err);
      });


    }

---

如果要在第一次加载页面时查看数据，请尝试服务器端渲染

Yes。但我需要在页面加载时查看更改。我正在组件上使用

数据

状态值。因此，我需要在安装组件时查看更改。我怎样才能做到这一点？谢谢你的这种方法。另一个问题是我也需要更新

dataa

状态值。为了这个。我有一些预先配置的数据对象。我需要将我从

发票

中获得的信息添加到该列表中。我在回调函数中这样做（concatation），并尝试

setState（{dataa:this.state.invoices}）

它给我这个错误，对象作为React子对象无效（找到：具有键{}的对象）。如果要呈现子项集合，请改用数组。@BhagyaKolithaJayalath您可以将

dataa

更新为

invoices

。我更新了我的答案。老实说，这就是我想要做的。当我这样做时，我得到了我在上面的评论中提到的这个错误。这就是我要做的

axios.get（“http://localhost:4005/purchaseinvoices）然后（response=>{this.setState（{invoices:response.data}，（）=>{TableValues.rows=this.state.invoices this.setState（{dataa:TableValues}）；}）.catch（err=>{console.log（err）；}）

使用状态值似乎有问题。最好在您的问题中提供有关该问题的详细信息。然后我可以帮助您。是的。但我需要在页面加载时查看更改。我正在组件上使用该

数据

状态值。因此，我需要在安装组件时查看更改。我如何才能这样做？谢谢你的这种方法。另一个问题是我也需要更新

dataa

状态值。为此，我有一些预配置的数据对象。我需要将从

invoices

中获得的内容添加到该对象中。我正在回调函数中这样做（concatation），并尝试

设置状态（{dataa:this.state.invoices}）

它告诉我此错误对象作为React子对象无效（找到：具有键{}的对象）。如果您想呈现子对象集合，请改用数组。@BhagyaKolithaJayalath您可以将

dataa

更新为

invoices

。我更新了我的答案。老实说，这就是我试图做的。当我这样做时，我得到了上面评论中提到的错误。这就是我试图做的

axios。获取("http://localhost:4005/purchaseinvoices）然后（response=>{this.setState（{invoices:response.data}，（）=>{TableValues.rows=this.state.invoices-this.setState（{dataa:TableValues}）；}）.catch（err=>{console.log（err）；}）

使用状态值似乎有问题。最好在您的问题中提供有关该问题的详细信息。然后我可以帮助您。可能重复的可能重复的