无法访问对象数组中的元素

Question

我通过点击一个 API 来获取我的响应并将响应的每个元素（它是一个对象数组）推送到处于状态的数组中，即 mydata

state={
      mydata:[]
}

 componentDidMount() {
    const headers = {
        "Content-Type": "application/json",
    };

    Axios.get("/getmeetings", {
            headers
        })
        .then((res) => {
            if (res.status === 200) {
                console.log(res);
                res.data.forEach((e, i) => {
                    this.state.mydata.push(e)
                })

            } else {
                alert(res);
            }
        })
        .catch((error) => console.log(error));
}

现在的问题是当我尝试访问我的状态变量的长度时，它给出了0 我尝试打印数组，我可以看到有可用的值。

我还检查了我的状态变量是否使用 chrome react 扩展正确填充。

现在另一个奇怪的事情是当我将另一个对象硬编码到 mydata 变量中时

state= {
     mydate = [{name:"temp"},{age:"1234"}]
}

然后再次将我的响应推送到该数组上，后来当我检查它的长度时，它给了我2。当我尝试打印该数组时，它会显示这 2 个对象以及我的其他推送对象。

这是我尝试推送的示例对象

{
  "agenda": "sadsadasd",
  "project": "ECAM",
  "meeting_title": "asdasd",
  "meeting_id": "1588072890",
  "attendees": [
    "a@#$$",
    "a@a"
  ],
  "date": "1588072890",
  "host": "a@a"
}

Answer 1

考虑避免直接推送，因为它会改变状态。请改用setState 函数。

this.setState(({ myData }) => ({ myData: [...myData, res.data] }));