useEffect 中的 API 调用返回未定义

Question

我有一个简单的功能组件，其中包括获取本地存储的 JSON 文件。

我试图从 JSON 文件中引入数据，虽然这应该是一个简单的任务，但我遇到了一个问题。

我的控制台日志显示两个单独的日志 - 一个是空对象，可能来自 useState 定义，第二个包含来自其中的 fetch 的数据。

因此，当我尝试对正在获取的数据执行任何操作时，将返回 undefined，因此我无法使用它。我觉得我错过了一些明显的东西，但我不完全确定这里发生了什么。我尝试过async/await但没有成功。

我缺少什么？

const Landing = () => {
    const [api, updateApi] = useState({});

    const getData = () => {
      fetch('data.json')
      .then((response) => response.json())
      .then((data) => updateApi({api: {data}}))
    }
    useEffect(() => {
      getData();
    }, []);

    console.log(api)
  
    return (
        <p>Hey!</p>
    )
}

Answer 1

您需要做的就是将 return 包装在 if/else 块中，并返回（例如旋转圆圈）加载指示器。当它使用来自 api 的数据重新渲染时，它会返回所需的数据表示形式。

Answer 2

使用 async/await 语法，您可以将 fetch 请求放入 useEffect 挂钩中，并设置与当前操作类似的状态。

export default function Landing() {
  const [api, updateApi] = useState({});

  useEffect(() => {
    const getData = async () => {
      const response = await fetch("data.json");
      const data = await response.json();
      updateApi({ api: { data } });
    };
    getData();
  }, []);

  return <div>{JSON.stringify(api)}</div>;
}

如果您使用 useState({}) 初始化状态，则该值将不会未定义。但是，如果您想在执行某些操作之前检查这一点，那么另一个答案中建议的 if/else 语句是合适的，或者如果它位于组件 return 内，那么常见的模式是 return div>{api && JSON.stringify(api)};.