React组件空数组.map定义及动态列表迁移渲染问题咨询

嘿，我来帮你搞定这两个React的问题～

1. 如何在React组件中定义包含空数组的.map列表？ #

核心思路就是给数组做兜底处理，避免因为数组是undefined或者空数组导致渲染报错。这里有几种实用的方法：

• 方法一：给数组设置默认空数组
  如果你不确定传入的数组是否存在（比如从props或state里拿到的可能是undefined），可以用|| []兜底，确保永远是数组类型：

  function MyComponent({ items }) {
    return (
      <div>
        { (items || []).map((item, index) => (
          <div key={index}>{item.name}</div>
        )) }
        {/* 空数组时可以加友好提示 */}
        { (items || []).length === 0 && <p>暂无数据</p> }
      </div>
    );
  }
  

• 方法二：使用可选链操作符
  ES2020的可选链?.能帮你安全访问数组的map方法，如果数组是undefined或null，会直接返回undefined，不会触发报错：

  function MyComponent({ items }) {
    return (
      <div>
        { items?.map((item, index) => (
          <div key={index}>{item.name}</div>
        )) }
        { items?.length === 0 && <p>暂无数据</p> }
      </div>
    );
  }
  

• 方法三：初始化state时直接设为空数组
  如果数组是组件自己的state，初始化时就设为空数组，后续就不用额外兜底了：

  function MyComponent() {
    const [items, setItems] = useState([]); // 初始为空数组
    return (
      <div>
        { items.map((item, index) => (
          <div key={index}>{item.name}</div>
        )) }
        { items.length === 0 && <p>暂无数据</p> }
      </div>
    );
  }
  

2. 动态迁移列表项到archived/favourite列表的问题解决 #

你遇到的“x未定义”和列表无法访问的问题，大概率是初始state没设置正确，或者操作state时直接修改了原数组，也可能是子组件接收props时没做兜底。咱们一步步来解决：

第一步：正确初始化父组件的state #

先确保父组件里的两个列表初始就是空数组，避免出现undefined：

function ParentComponent() {
  // 所有列表初始化为空数组，确保永远是数组类型
  const [mainList, setMainList] = useState([{id:1, name:'Item1'}, {id:2, name:'Item2'}]);
  const [archivedList, setArchivedList] = useState([]);
  const [favouriteList, setFavouriteList] = useState([]);

第二步：编写迁移项的函数 #

注意：React的state是不可变的，不能直接用push/splice修改原数组，必须创建新数组来更新state：

// 迁移到归档列表
  const moveToArchived = (itemId) => {
    // 从主列表过滤掉要迁移的项
    const newMainList = mainList.filter(item => item.id !== itemId);
    // 找到要迁移的项，添加到归档列表
    const itemToMove = mainList.find(item => item.id === itemId);
    setMainList(newMainList);
    setArchivedList([...archivedList, itemToMove]);
  };

  // 迁移到收藏列表
  const moveToFavourite = (itemId) => {
    const newMainList = mainList.filter(item => item.id !== itemId);
    const itemToMove = mainList.find(item => item.id === itemId);
    setMainList(newMainList);
    setFavouriteList([...favouriteList, itemToMove]);
  };

第三步：安全渲染三个列表 #

渲染时判断数组长度，为空时显示提示，避免报错：

return (
    <div className="list-container">
      <div>
        <h3>主列表</h3>
        {mainList.length === 0 ? (
          <p>主列表暂无数据</p>
        ) : (
          mainList.map(item => (
            <div key={item.id}>
              <span>{item.name}</span>
              <button onClick={() => moveToArchived(item.id)}>归档</button>
              <button onClick={() => moveToFavourite(item.id)}>收藏</button>
            </div>
          ))
        )}
      </div>

      <div>
        <h3>归档列表</h3>
        {archivedList.length === 0 ? (
          <p>暂无归档项</p>
        ) : (
          archivedList.map(item => <div key={item.id}>{item.name}</div>)
        )}
      </div>

      <div>
        <h3>收藏列表</h3>
        {favouriteList.length === 0 ? (
          <p>暂无收藏项</p>
        ) : (
          favouriteList.map(item => <div key={item.id}>{item.name}</div>)
        )}
      </div>
    </div>
  );
}

为啥之前会报错？ #

• 如果初始state没设为空数组（比如const [archivedList, setArchivedList] = useState();），那archivedList初始是undefined，调用map就会报“列表未定义”。
• 操作state时直接修改原数组（比如archivedList.push(item)），会导致React无法检测到state变化，还可能引发奇怪的错误。
• 点击时出现“x未定义”，大概率是onClick里传的参数不对，比如没正确拿到item.id，或者函数里引用了未定义的变量。

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