如何使用useState挂钩将多个对象推入数组

时间:2020-10-12 05:05:03

标签: react-hooks

我需要使用UseState挂钩将Multiple对象推入数组中, 在这里,我将多个对象放入“ getallData”中,因此我需要将所有多个对象发送到setdataObject中。但是这里我没有得到所有多个对象的数据,也没有得到一个空数组。

 const [data, setData] = useState([])
  const [dataObject,setdataObject] = useState([{}])

 useEffect(()=>{
   fetch('http://localhost:3000/results')
   .then(res =>res.json())
   .then((results)=>{
    setData(results);
    //console.log(results);
    for(let i=0;i<results.length;i++){
      //console.log(results);
      const getallData={
        name :`${results[i].name.first} ${results[i].name.last}`,
        money : results[i].price.money.wealth
      }
      //console.log(getallData);
      setdataObject(getallData);
      console.log(dataObject);
    }
   })
 },[])

1 个答案:

答案 0 :(得分:1)

您正在循环内调用setdataObject。而是可以将所有数据添加到数组中,然后在循环末尾进行设置。像这样

    const tempArray = []
    for(let i=0;i<results.length;i++){
      const getallData={
        name :`${results[i].name.first} ${results[i].name.last}`,
        money : results[i].price.money.wealth
      }
      tempArray.push(getallData)
    }
    setdataObject(tempArray);

另一件事。由于setState函数是异步的,因此如果您在更改任何状态值后立即调用console.log(),则不会立即获得更改。结果,您的以下代码输出了错误的输出

 setdataObject(getallData);
 console.log(dataObject);    // WRONG !!!!