Question

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

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组件之后，提取调用（即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({});，然后它会崩溃，cos初始data.hits等于undefined，您会得到错误Can't read property .map of undefined

在useEffect中使用异步提取功能并呈现到页面

1 个答案: