如何將JSON對象獲取到React組件？

Question

我用AXIOS創建了一個React App。 我需要從后端獲取一些JSON數據，並使用該數據更改State。 當我得到對象並映射到我的狀態時，狀態僅是為對象的最后一個元素設置的。 所以我只能看到狀態中的最后一個元素。 我怎樣才能使所有要素達到狀態？

我的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")
]

我該如何解決？

Answer 1

可能是因為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 。

Answer 2

您需要先映射數據，然后設置整個狀態。

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 }) => {
    data.response.AllUsers.forEach(user => {
      this.setState(prev =>
        ({...prev, data: [prev.data, createData(user.name, user.id, user.email)]})
      )
    })
  })