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。当我尝试打印该数组时，它会显示这两个对象以及我的其他推入对象。

这是我要推送的示例对象

{
  "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] }));

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

1 个答案: