当 State 最初未定义时，如何避免 React 中“无法读取未定义的属性‘map’”？

Question

我正在构建一个 React 应用程序，我想在其中映射项目数组并将它们呈现为列表。我面临的问题是当状态最初未定义时，map()函数会抛出以下错误：

Uncaught TypeError: Cannot read property 'map' of undefined

这是我的代码的简化版本：

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

function ItemList() {
  const [items, setItems] = useState(); // State initially undefined

  useEffect(() => {
    // Simulating an API call
    setTimeout(() => {
      setItems(['Item 1', 'Item 2', 'Item 3']);
    }, 2000);
  }, []);

  return (
    <div>
      <h1>Item List</h1>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default ItemList;

我尝试过的

• 我知道发生错误是因为状态项最初是未定义的，并且无法在未定义时调用map()。
• 我尝试添加条件检查（if（items）），但当项目在初始渲染后短时间内未定义时，它仍然会导致问题。
• 我还尝试使用空数组（useState([])）初始化状态，但我想了解处理状态可能短暂未定义的情况的最佳实践。

问题

避免此错误同时确保组件即使在异步获取数据时也能顺利工作的最佳方法是什么？我应该使用状态的默认值还是应用其他方法来有效地处理这种情况？

Answer 1

添加条件渲染，以防项目不可用。你可以按照这个做法

return (
    <div>
      <h1>Item List</h1>
      {items ? (
        <ul>
          {items.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      ) : (
        <p>Loading items...</p>
      )}
    </div>
  );
}