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

Question

我正在构建一个太阳系应用程序，我希望将我星球的所有信息保存在一个 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 异步运行。所以发生了什么

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

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