React函数组件中更新LocalStorage记录遇前端不更新问题求助

你的代码存在几个关键问题，导致编辑操作后前端界面无法同步更新，以下是问题分析和修正方案：

核心问题梳理 #

1. 状态更新错误：编辑提交时错误地更新了单个输入项的reg状态，而非存储列表的regArr状态，导致界面依赖的数据源未变化。
2. 匹配条件失效：列表项没有id属性，你用li.id === id判断编辑项，这个条件永远不成立，所以列表没有被修改。
3. LocalStorage存储错误值：提交编辑时存储了错误的状态值，导致LocalStorage和组件状态不同步。

修正后的代码 #

Test2组件修正版 #

// 获取LocalStorage数据
const getDatafromLS = () => {
    const data = localStorage.getItem('reg');
    if (data) {
        return JSON.parse(data);
    } else {
        return []
    }
}

const Test2 = () => {
    const [regArr, setRegArr] = useState(getDatafromLS());
    const [reg, setReg] = useState({ name: "" });
    const [editForm, setEditForm] = useState(false);
    const [editIndex, setEditIndex] = useState(null); // 改用editIndex存储编辑项的索引

    const handleChange = (e) => {
        const name = e.target.name;
        const value = e.target.value;
        setReg({ ...reg, [name]: value });
    }

    const { name } = reg;
    const handleSubmit = (e) => {
        e.preventDefault();

        if (name === "") {
            alert("输入不能为空")
        } else {
            // 给新项添加唯一id，避免用索引带来的问题
            setRegArr([...regArr, { id: Date.now(), name }]);
        }
        setReg({ name: "" })
    }

    useEffect(() => {
        localStorage.setItem('reg', JSON.stringify(regArr));
    }, [regArr])

    const handleDelete = (i) => {
        const newdataArr = regArr.filter((_, index) => index !== i);
        setRegArr(newdataArr);
    }

    const handleEdit = (i) => {
        setEditForm(true);
        setEditIndex(i);
        // 直接从状态取数据，无需读LocalStorage
        setReg(regArr[i]);
    }
    
    const handleEditSubmit = (e) => {
        e.preventDefault();
    
        // 根据索引更新对应项
        const newList = regArr.map((item, index) => {
            if (index === editIndex) {
                return { ...item, name: reg.name };
            }
            return item;
        });
        // 更新列表状态，触发界面渲染
        setRegArr(newList);
        // 重置输入状态和编辑表单
        setReg({ name: "" });
        setEditForm(false);     
    }

    return (
        <div>
            {!editForm && (
                <div>
                    <label>新注册</label>
                    <input type='text' name='name' onChange={handleChange} value={reg.name} placeholder='姓名...' />
                    <button type='submit' onClick={handleSubmit}>提交</button>
                </div>
            )}
            {editForm && (
                <div>
                    <label>更新注册</label>
                    <input type='text' name='name' onChange={handleChange} value={reg.name} placeholder='姓名...' />
                    <button type='submit' onClick={handleEditSubmit}>更新</button>
                </div>
            )}
            <p></p>
            <Test3 test3={regArr} handleDelete={handleDelete} handleEdit={handleEdit} />
        </div>
    );
};

export default Test2;

Test3组件（无需修改，若用id则可调整key） #

const Test3 = ({ test3, handleDelete, handleEdit }) => {
    return (
        <div>
            <table>
                <tbody>
                    {test3.map((rg, index) => (
                        <tr key={rg.id || index}> {/* 优先用唯一id作为key */}
                            <td>{rg.name}</td>
                            <td><button onClick={() => handleDelete(index)}>删除</button></td>
                            <td><button onClick={() => handleEdit(index)}>编辑</button></td>
                        </tr>
                    ))}
                </tbody>
            </table>
        </div>
    );
};

export default Test3;

额外说明 #

• 给每个列表项添加了id: Date.now()作为唯一标识，避免使用索引作为key在列表增删时引发的渲染问题。
• 编辑时直接从regArr状态取数据，减少LocalStorage的不必要读取，保证状态一致性。
• 删除操作改用filter方法，比splice更符合不可变数据的操作规范，避免直接修改原数组。

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