Javascript 如何让JSON对象响应组件？

我用AXIOS创建了一个React应用程序。我需要从后端获取一些JSON数据，并用这些数据更改状态当我获取对象并映射到我的状态时，状态仅为对象的最后一个元素设置。因此，我只能看到状态中的最后一个元素。如何才能将所有元素添加到状态

我的API调用如下

API.post('viewallusers', [], config)
      .then(({ data }) => {
        const allUsers = data.response.AllUsers;
        allUsers
          .map(user => {
            return (
              this.setState({
                data: [
                  createData(
                    user.name,
                    user.id,
                    user.email
                  )
                ]
              })
            )
          })
      })
      .catch((err) => {
        console.log("AXIOS ERROR: ", err);
      })

JSON数据：

{response :
  {AllUsers :
    0 : {name: "Amy", id: 1, email: "myEmail1"},
    1 : {name: "Doris", id: 2, email: "myEmail2"},
    2 : {name: "Jase", id: 3, email: "myEmail3"}
  }
}

我希望状态“数据”设置如下：

data : [
  createData("Amy",1,"myEmail1"),
  createData("Doris",2,"myEmail2"),
  createData("Jase",3,"myEmail3")
]

但是获取JSON数据后的实际状态是

data : [
  createData("Jase",3,"myEmail3")
]

---

如何解决这个问题？

这可能是因为

setState

没有进行深度合并。所以如果你在州里

state = {
    key1: 123,
    key2: {
        test1: 1,
        test2: 2

    }

}

你呢

this.setState({
    key2: {
        test1: 4
    }

})

你最终会得到

state = {
    key1: 123,
    key2: {
        test1: 4
    }

} 

你必须这样做：

this.setState((ps) => ({
    key2: {
        ...ps.key2,
        test1: 4
    }

}));

---

如果

key2

的值是数组，则类似的方法也适用。或者，您可以先映射所有数据，然后按照其他答案中的建议执行

setState

。

这可能是因为

setState

没有执行深度合并。所以如果你在州里

state = {
    key1: 123,
    key2: {
        test1: 1,
        test2: 2

    }

}

你呢

this.setState({
    key2: {
        test1: 4
    }

})

你最终会得到

state = {
    key1: 123,
    key2: {
        test1: 4
    }

} 

你必须这样做：

this.setState((ps) => ({
    key2: {
        ...ps.key2,
        test1: 4
    }

}));

---

如果

key2

的值是数组，则类似的方法也适用。或者，您可以先映射所有数据，然后按照其他答案中的建议执行设置状态。

您需要先映射数据，然后设置整个状态

API.post('viewallusers', [], config)
  .then(({ data }) => {
    this.setState({
      data: data.response.AllUsers.map(user => (createData(user.name, user.id, user.email)))
    })
  })

或者使用回调版本的

setState

并手动合并

state.data

（在这种特殊情况下不推荐）

---

您需要首先映射数据，然后设置整个状态

API.post('viewallusers', [], config)
  .then(({ data }) => {
    this.setState({
      data: data.response.AllUsers.map(user => (createData(user.name, user.id, user.email)))
    })
  })

或者使用回调版本的

setState

并手动合并

state.data

（在这种特殊情况下不推荐）