在 useEffect 中使用异步 fetch 函数并渲染到页面

Question

您好，我有一个关于 componentDidMount 中的 fetch 调用的问题。这是一个示例代码：

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [data, setData] = useState({ hits: [] });
  useEffect(async () => {
    const result = await axios(
      'https://hn.algolia.com/api/v1/search?query=redux',
    );
    setData(result.data);
  }, []);
  return (
    <ul>
      {data.hits.map(item => (
        <li key={item.objectID}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
    </ul>
  );
}
export default App;

这里

useEffect(()=>{},[]);

这与 componentDidMount 相同。

在 useEffect 中，我们从服务器获取数据并将其存储到data。然后data 用于将项目呈现到页面作为<li> 元素。

我的问题是，第一次安装App 组件后是否会执行 fetch 调用（即 axios）？如果是这样，data 如何在第一次渲染时及时填充？

<ul>
      {data.hits.map(item => (
        <li key={item.objectID}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
 </ul>

我的理解是，由于data 是在第一次挂载后填充的，所以它不能用于渲染？

也许我误解了 MOUNTING 和 RENDERING 之间的区别？

有人可以纠正我吗，因为上面的代码显然可以工作。

谢谢。

Answer 1

好吧，它没有填充，但空数组仍然存在，所以代码不会崩溃。当组件挂载并首次渲染时，data.hits 等于一个空数组[]。所以你可以映射它，但长度为 0，所以地图不会产生任何东西。如果最初您将 data.hits 定义为空对象，或者 null 或其他东西，例如const [data, setData] = useState({});，THEN 它会崩溃，因为最初data.hits 等于undefined，你会得到一个错误Can't read property .map of undefined