如何保存和显示从数据库检索到的数据

Question

So I've retrieved data in JSON format using GET request then I'm facing a problem in saving into my state so that I can display them into my span / div / h1 using map function . 这是我的JSON数据的样子：

[
   {
        "projectName": "SHIBA INU",
        "projectToken": "SHIB",
        "tokenPrice": 0.2,
        "saleStart":{
            "$date": "2021-12-20T20:00:00.00Z"
        },
   {
        "projectName": "BITCOIN",
        "projectToken": "BTC",
        "tokenPrice": 200,
        "saleStart":{
            "$date": "2021-12-20T20:00:00.00Z"
   }
]

所以我正在尝试这样做，但我认为它不会起作用：

const [projectData, setProjectData] = useState({})
useEffect(() => {
      axios.get(`my api`).then(res => {
        for(let i=0; i<res.data.length; i+1){
          setProjectData(...projectData, res.data[i])
        }
      }).catch(e => console.log("error: ", e));
    },[]);

我不确定是否应该将它们保存到数组或 object

Answer 1

从示例中的数据来看，您似乎正在尝试存储对象数组，因此您需要使用数组初始化 state，然后将响应中的项目也添加到数组中。 您也不需要循环：您可以一步将所有数组项与现有 state 一起传播到一个新数组中：

const [projectData, setProjectData] = useState([]);

useEffect(() => {
  axios.get(`my api`).then(res => {
    setProjectData([...projectData, ...res.data]);
  }).catch(e => console.log("error: ", e));
}, []);

Answer 2

首先，您没有在 for 循环中更新i值。 由于您的i值永远不会小于 res.data.length，因此它将无限循环。 相反，您应该使用i++在每次迭代时递增它：

for(let i=0; i<res.data.length; i++)

除了像这样设置你的 state 是有问题的。 React 中的setState是异步的，这意味着当您使用它并访问您的projectData时，它不会 promise 您立即获得更新的 state。 相反，您应该尝试在您的情况下立即更新您的 state。 还要检查为什么 reactjs 中的 setState 是异步而不是同步？