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

Question

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

我首先使用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 回答我的组件正在获取正确的数据，尽管我现在得到了更多预期的控制台输出？

Answer 1

您永远不会使用获取的数据作为参数调用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方法。