React中LocalStorage存储数组后使用map渲染报错求助

问题根源 #

你的代码里初始arr的状态赋值存在逻辑漏洞：

• localStorage.getItem返回的是JSON字符串或null，你直接将data赋值给arr，导致组件第一次渲染时，arr可能是字符串类型（当localStorage已有值时）。字符串的map方法与数组的map行为完全不同，直接调用会触发类型错误。
• 虽然你在第一个useEffect里会把data转成数组再更新arr，但这是组件挂载后才执行的逻辑，第一次渲染已经用字符串去执行map了，因此报错。

修复后的完整代码 #

import { useState, useEffect } from 'react';

function NumberList() {
    // 初始状态直接解析localStorage数据，确保arr始终是数组类型
    const storedData = window.localStorage.getItem("arrKey");
    const [arr, setArr] = useState(storedData ? JSON.parse(storedData) : []);

    // 仅保留同步localStorage的useEffect
    useEffect(() => {
        window.localStorage.setItem("arrKey", JSON.stringify(arr));
    }, [arr]);

    // 实现表单提交逻辑，正确更新数组
    const handleSubmit = (e) => {
        e.preventDefault();
        const newNum = e.target.newnum.value;
        if (newNum) {
            // 用函数式更新创建新数组，避免直接修改原状态
            setArr(prevArr => [...prevArr, Number(newNum)]);
            e.target.reset();
        }
    };

    return (
        <>
            <form onSubmit={handleSubmit}>
                <h2>Enter numbers</h2>
                <input type="number" name="newnum" />
                <button type="submit">Add Number</button>
            </form>
            <ul>
                {arr.map((num, index) => (
                    // 添加唯一key，符合React列表渲染规范
                    <li key={index}>{num}</li>
                ))}
            </ul>
        </>
    );
}

export default NumberList;

关键修复点 #

1. 初始状态正确解析：在useState中直接完成localStorage字符串到数组的转换，确保arr从渲染开始就是数组类型，避免第一次渲染的类型错误。
2. 移除冗余useEffect：第一个useEffect已无存在必要，初始状态处理已经完成数据解析。
3. 正确更新数组状态：使用函数式更新setArr(prev => [...prev, newNum])，通过创建新数组触发React状态更新，而非直接修改原数组。
4. 添加列表项key：给每个li元素添加唯一key属性，消除React控制台警告，提升渲染性能。

内容的提问来源于stack exchange，提问作者burakAydın