时间戳

首页 > 解决方案 > 在数组上设置状态多次记录空数组

javascript - 在数组上设置状态多次记录空数组

问题描述

我正在尝试从后端服务器获取数据并将其保存在一个数组中。完成此操作后，我想将数组传递给另一个组件。虽然，当我尝试填充数组并将其传递给我的组件时，我得到了多个传递的空数组，而不是一个包含数据的数组。

我首先使用初始化数组的状态useState()

const [data, setData] = useState([]);

然后我有一个从后端获取数据并尝试填充的函数data。

useEffect(() => {
const fetchData = () => {
  fetch('/data')
  .then((res) => res.json())
  .then((data) => {
    for (const property in data) {
        setDailyCases([...dailyCases].push(`${data[property]}`));
    }
  });
}
fetchData();
},[])

当我将它传递data给另一个组件时：<DataComp data={data}，我没有得到我期望的数据。

当我console.log(props.data)这是输出时：

错误数据

这很奇怪，因为如果我console.log()在运行数据循环时所有数据都是可见的：

正确的数据

如何确保data数组正确更新，并在通过时得到一个包含所有数据的数组？

这是DataComp组件：

const DataComp = (props) => {
  console.log(props.cases)

    return (
      <h1>Testing</h1>
  
    )
}

export default DataComp

使用@Fardeen Panjwani 回答我的组件正在获取正确的数据，尽管我现在得到了更多预期的控制台输出？

控制台输出

标签： javascriptarraysreactjs

解决方案

您永远不会setData使用获取的数据作为参数进行调用。

useEffect(() => {
const fetchData = () => {
  fetch('/data')
  .then((res) => res.json())
  .then((_data) => { // using "_data" in order to avoid clash with the state-hook
    setData(_data) // <= this line is responsible for populating the "data" value.
    for (const property in _data) {
        setDailyCases([...dailyCases].push(`${_data[property]}`));
    }
  });
}
fetchData();
},[])

为了更新data的值，您需要调用该setData方法。

推荐阅读