React中使用useState Hook删除对象内数组元素的问题

在React项目中，使用useState管理包含嵌套数组的对象数组时，删除子数组元素后界面不重新渲染、元素未被正确删除。需求是删除指定名称的guides元素，比如示例中的“Lee”或“John”。

原代码的问题 #

1. 直接修改原状态：var tempArray = dives;是直接引用原状态数组，修改这个数组本质是修改原状态，React因引用未变化，不会触发重渲染。
2. 嵌套对象未创建新引用：修改对象内的guides数组时，没有创建新的对象，嵌套对象的引用未更新，React无法感知状态变化。
3. 索引获取方式不合理：渲染时用dives.indexOf(i)获取索引，若数组存在重复元素会导致索引错误，且完全没必要——map本身可直接拿到索引。

修正后的完整代码 #

1. useState状态声明

const [dives, setDives] = useState([
    { boat: 'Marcelo', divesite: '', guides: ['Lee', 'John'] },
]);

2. 正确的删除函数

function deleteGuide(divIndex, guideName) {
    // 遍历数组，创建新数组和新对象，保证状态引用更新
    const updatedDives = dives.map((div, index) => {
        if (index === divIndex) {
            // 解构原对象，替换guides为过滤后的新数组
            return {
                ...div,
                guides: div.guides.filter(guide => guide !== guideName)
            };
        }
        return div;
    });
    setDives(updatedDives);
}

3. 优化后的界面渲染

{dives.map((div, divIndex) => (
    <div key={divIndex}>
        {div.guides.map((guide, guideIndex) => (
            <ButtonGroup key={guideIndex}>
                <Button>{guide}</Button>
                <Button onClick={() => deleteGuide(divIndex, guide)}>删除</Button>
            </ButtonGroup>
        ))}
    </div>
))}

关键说明 #

• 使用map创建新数组，对目标对象进行解构赋值生成新对象，同时通过filter返回新的guides数组——确保整个状态的引用完全更新，React会触发重渲染。
• 渲染时直接使用map提供的索引，避免indexOf的潜在问题，同时给每个循环元素添加唯一key，符合React列表渲染的规范。

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