如何从 useEffect 读取更新到 useState 的数据？

Question

我见过类似的问题，但 none 回答了我的问题。对于代码，就是这样。

  const [raceData, updateRaceData] = useState();
  const [raceChosen, updateRaceChosen] = useState();

  const url = "http://localhost:5000/races/viewraces";

  useEffect(() => {
    Axios.get(url)
      .then((response) => {
        const allRaces = response.data.races;
        updateRaceData(allRaces);
      })
      .catch((error) => console.error(`Error: ${error}`));
  }, []);


  console.log(raceData[0]);

因此，当我 console.log() raceData 和 raceData[0] 或 raceData1 时，它可以工作并且不会给我带来任何麻烦。但如果我改为 console.log(raceData[0].race)，然后刷新，它开始告诉我：

TypeError: 无法读取未定义的属性（读取 'race'）

如果能帮助我弄清楚为什么尝试从我收到的响应中访问内容无法完全正常工作，我们将不胜感激。

编辑： 这是带有 raceData[1] 的对象响应： Response object

Answer 1

浏览器在运行 console.log(raceData[0]) 变量被赋值之前。尝试 raceData && console.log(raceData[0]);，如果分配了 raceData，它只会执行 console.log()。

Answer 2

尝试这样映射比赛数据：

raceData?.map((race) => console.log(race))

这应该会填充您的比赛数据信息

如何从 useEffect 读取更新到 useState 的数据？

How can I read data updated to useState from a useEffect?

javascript

ajax

get

reactjs