ReactJS数据映射问题求助：items.map不是函数如何解决？

核心问题分析 #

从localStorage获取的liked数据本质是JSON字符串——哪怕console.log输出看起来像数组，它实际是字符串类型，自然没有map方法。另外还要考虑首次加载时localStorage无数据的情况，需设置合理初始值避免异常。

解决方案步骤 #

1. 正确解析localStorage数据 #

获取数据时必须用JSON.parse()将字符串转为数组，同时处理空数据的默认情况：

const [likedItems, setLikedItems] = useState(() => {
  const storedData = localStorage.getItem('liked');
  // 有数据则解析，无数据返回空数组
  return storedData ? JSON.parse(storedData) : [];
});

2. 数据更新时同步到localStorage #

当心愿单数据变化时，要先把数组转为JSON字符串再存入：

const updateLikedList = (newItem) => {
  const updatedList = [...likedItems, newItem];
  setLikedItems(updatedList);
  localStorage.setItem('liked', JSON.stringify(updatedList));
};

3. 安全使用map方法 #

此时likedItems是稳定的数组类型，直接使用map即可，可选链也能正常生效：

return (
  <div className="wishlist-container">
    {likedItems.map((item) => (
      <div key={item.id} className="wishlist-item">
        <span>商品ID：{item.id}</span>
        {/* 其他心愿单内容 */}
      </div>
    ))}
  </div>
);

常见排查点 #

• 用typeof items检查类型：如果输出string，说明未做JSON解析
• 禁止直接操作localStorage返回值：必须先解析再进行数组操作
• 初始值设为空数组：避免首次加载时items为null或undefined

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