Question

从 JSON 文件获取数据，不返回任何内容

2022-01-09

114

javascript reactjs json react-hooks

我正在构建一个太阳系应用程序，我想将我星球的所有信息都保存在一个 JSON 文件中，以便于访问。JSON 文件的格式如下
Planet-info.json，位于我的 React 应用程序的 public 文件夹中

  "planets": [
        {
            "Name": "Mercury",
            "Description": "The smallest planet in our solar system and closest to the Sun—is only slightly larger than Earth's Moon. Mercury is the fastest planet, zipping around the Sun every 88 Earth days.",
            "Moons": 0,
            "Habititable": "false"
        },
        {
            "Name": "Venus",
            "Description": "is hot",
            "Moons": 0,
            "Habititable": "false"
        }
    ]

我正在使用 useEffect 钩子获取数据

 const [planetData, setPlanetData] = useState();
  useEffect(() => {
    const fetchData = () => {
      fetch("/planet-info.json").then((result) => {
        setPlanetData(result);
      });
    };
    fetchData();
    console.log(`planet data is ${planetData}`);
  }, []);

但是，当此代码运行并且 console.log 语句运行时，它会返回行 planet data is 它没有显示 undefined ，甚至没有显示 [Object object] ，它只是空白的，我无法从那里进行故障排除。

Answer 1

fetchData 异步运行。因此，正在发生的事情是

fetchData 开始
console.log 执行（在 json 文件有机会加载之前）
当 fetch 完成时， setPlanetData(result) 发生。如果您想看到打印出来的值，应该这样做：

useEffect(() => {
  fetch("/planet-info.json").then(result => {
    const json = result.json();
    console.log(json);
    setPlanetData(json);
  });
});