使用useEffect获取数据返回空列表，组件两次渲染问题咨询

这是React的正常行为：useEffect 会在组件首次渲染完成后才执行，所以第一次渲染时books还是你初始化的空数组，等接口请求完成调用setBooks后，组件才会重新渲染并展示数据。

如果你想优化这个体验，或者避免无数据时的空页面，可以试试下面的方案：

1. 添加加载状态提示 #

给组件加个loading状态，在数据请求完成前显示加载提示，请求完成后再渲染书籍列表：

function App() {
  const [books, setBooks] = useState([]);
  const [isLoading, setIsLoading] = useState(true); // 新增加载状态

  useEffect(() => {
    const dataFetch = async () => {
      try {
        const response = await fetch("http://localhost:8000/book/");
        const data = await response.json();
        setBooks(data["message"]);
      } catch (err) {
        console.error("数据请求失败：", err);
      } finally {
        setIsLoading(false); // 请求完成（成功/失败）都关闭加载状态
      }
    };

    dataFetch();
  }, []);

  // 加载中时显示提示
  if (isLoading) {
    return <div className="App">加载中...</div>;
  }

  return (
    <div className="App">
      <div className="data">
        {books.length === 0 ? (
          <div>暂无书籍数据</div>
        ) : (
          books.map((book) => (
            <Product key={book.isbn} book={book}></Product>
          ))
        )}
      </div>
      <div className="buttonHolder"></div>
    </div>
  );
}

export default App;

2. 使用数据请求库（SWR/React Query） #

这类库自带缓存、加载状态、错误处理等功能，能更优雅地处理数据请求：
比如用SWR的示例：

import useSWR from 'swr';

const fetcher = async (url) => {
  const res = await fetch(url);
  const data = await res.json();
  return data["message"];
};

function App() {
  const { data: books, error, isLoading } = useSWR("http://localhost:8000/book/", fetcher);

  if (isLoading) return <div>加载中...</div>;
  if (error) return <div>请求出错了</div>;

  return (
    <div className="App">
      <div className="data">
        {books.length === 0 ? (
          <div>暂无书籍数据</div>
        ) : (
          books.map((book) => (
            <Product key={book.isbn} book={book}></Product>
          ))
        )}
      </div>
      <div className="buttonHolder"></div>
    </div>
  );
}

export default App;

3. 关键说明 #

React的组件渲染是同步的，而数据请求是异步操作，不可能让组件在首次渲染时就拿到异步数据。上面的方案都是优化用户体验，而不是改变React的渲染机制。

内容的提问来源于stack exchange，提问作者sidhudog