UseState 钩子没有分配变量来获取数据答案

【问题标题】：UseState hook is not reassigning variable to fetched dataUseState 钩子没有分配变量来获取数据
【发布时间】：2021-10-04 15:39:02
【问题描述】：

目前，我们正在尝试使用使用状态挂钩填充一个空数组。我们在控制台中看到来自“工作数据”日志的数据，然后尝试 setFinalData(workingData) 但是当我们控制台在以下数组中记录最终数据时，它是一个空数组。使用钩子有什么问题吗？

const [finalData, setFinalData] = useState([]);

  const workingData = [];

  useEffect(() => {
    console.log("in useEffect");
    fetch("/postQuestionnaire/getUserResults")
      .then((res) => res.json())
      .then((data) => {
        console.log("data: ", data);
        const pieChartData = data.results[0];
        workingData.push({
          name: "mobility_kg",
          value: [pieChartData.mobility_kg],
        });
        workingData.push({
          name: "consumption_kg",
          value: pieChartData.consumption_kg,
        });
        workingData.push({
          name: "household_kg",
          value: pieChartData.household_kg,
        });
        console.log("working data line 57", workingData);
        setFinalData(workingData);
        console.log(finalData);
      });
  }, []);

【问题讨论】：

您无法在setState 调用后直接登录并查看更改，新值将在下一个渲染周期之前可用。
这能回答你的问题吗？ useState set method not reflecting change immediately
嗯，是的，我想我看到了这样的答案。我试过等待设置状态的函数，但这似乎不起作用。另外，在我从 github 找到的这个链接中，这个人正在做我想做的事情，它似乎正在工作github.com/jlohier/Stocks/blob/master/src/graph.js
您的 setState 应该可以正常工作，只是 console.log(finalData) 不会记录更新后的状态。不过，您应该在最后一个 then 中声明 workingData 数组，但没有理由让它挂在外面（无论如何它将在下一次渲染时重新声明）。你不能等待它，只需等待重新渲染，然后使用新值。

标签： reactjs react-hooks fetch

【解决方案1】：

这是您的确切 sn-p（带有测试 API）。

我将您的 console.log() 移出 then 回调，并将您的工作数组移入其中，因为它在外面没有做任何有用的事情。

const { useState, useEffect } = React;

function App() {
  const [finalData, setFinalData] = useState([]);

  // log will run each render
  console.log('finalData: ', finalData);

  useEffect(() => {
    console.log("in useEffect");
    fetch('https://jsonplaceholder.typicode.com/todos')
      .then(response => response.json())
      .then(data => {
        const workingData = []; // move the working array into the callback
        const pieChartData = data[0];
        workingData.push({
          name: "mobility_kg",
          value: [pieChartData.userId],
        });
        workingData.push({
          name: "consumption_kg",
          value: pieChartData.title,
        });
        workingData.push({
          name: "household_kg",
          value: pieChartData.completed ? 'Completed' : 'Not completed',
        });
        console.log("working data line 57", workingData);
        setFinalData(workingData);
      });
  }, []);
  
  return (
    <div className="App">
        {finalData.length ? 
         finalData.map((datum, i)=> (
          <p key={datum.name}>{datum.name}: {datum.value}</p>
         ))
        : null}
    </div>
  );
}

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>

<div id="root"></div>

【讨论】：