React JS中追加数组元素时如何避免生成嵌套数组？

你的代码之所以会生成嵌套数组，核心问题有两个：

• 初始状态data设为null，第一次更新时会把null和storedData包装成数组，后续更新又把这个数组作为新数组的第一个元素，层层嵌套
• 每次更新时直接把旧的data作为数组元素放入新数组，而不是展开旧数组的内容

修正方案 #

1. 把初始状态设为空数组[]，确保data始终是数组类型
2. 使用展开运算符展开旧数组的所有元素，再追加新的storedData，同时过滤掉无效值（比如storedData为null的情况）

修正后的代码：

const [data, setData] = useState([]);
const storedData = JSON.parse(localStorage.getItem("test"));

useEffect(() => {
  // 仅当storedData有效时才追加
  if (storedData !== null) {
    setData(prevData => [...prevData, storedData]);
  }
}, [storedData]);

额外说明 #

• 如果localStorage.getItem("test")存储的本身就是数组，你需要调整逻辑：比如每次更新时直接替换或合并数组，而不是追加整个数组（根据你的实际需求）
• 若要在组件初始化时就加载localStorage中的历史值，可以在useState的初始值里直接读取：

  const initialData = JSON.parse(localStorage.getItem("test")) || [];
  const [data, setData] = useState(initialData);
  

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