React祖辈组件状态更新后孙级列表元素消失且报key唯一警告如何解决

核心问题1：Option元素消失 #

你触发问题的根源是状态直接突变+父子组件状态不同步：

• setFilter方法中直接修改了原filters Map（Map是引用类型，filters.get(category).set()会直接修改原有状态对象），属于React状态更新的违规操作，会导致DOM Diff时出现不可预期的渲染异常，元素消失就是典型表现。
• Option组件内部单独维护了selected状态，和父组件filters中存储的选中状态完全脱节，两者更新不同步也会加剧渲染异常。

核心问题2：key警告 #

你虽然给Option加了key，但状态突变会导致React Diff时无法正确识别元素的唯一性，进而误判key重复/缺失。如果不同分类下存在同名的option，也会触发key重复警告。

修复步骤 #

1. 修复setFilter，避免直接修改原状态 #

修改ProductFilters中的setFilter方法，每次更新都生成全新的Map实例，不改动原状态：

const setFilter = (category, filter, selected) => {
    // 拷贝当前分类下的option Map
    const originalOptions = filters.get(category);
    const newOptions = new Map(originalOptions);
    // 更新对应option的选中状态
    newOptions.set(filter, { ...newOptions.get(filter), selected });
    // 拷贝完整的filters Map
    const newFilters = new Map(filters);
    newFilters.set(category, newOptions);
    setFilters(newFilters);
};

2. 移除Option内部状态，和父组件状态同步 #

删除Option组件内部的selected本地状态，直接使用父组件传入的选中值：
首先修改FilterOptions中渲染Option的逻辑，传入selected参数：

options.push(
    <Option
        key={key}
        name={option.name}
        category={props.name}
        selected={option.selected}
        setFilter={props.setFilter}
    />
);

然后重构Option组件：

const Option = (props) => {
    const handleClick = () => {
        props.setFilter(props.category, props.name, !props.selected);
    };
    return (
        <ListItemButton
            selected={props.selected}
            sx={{ pl: 8 }}
            onClick={handleClick}
        >
            <ListItemText primary={props.name} />
        </ListItemButton>
    );
};

3. 可选：优化key的唯一性 #

如果不同分类下有同名的option，可将Option的key改为分类名+option名的组合，保证全局唯一：

key={`${props.name}-${key}`}

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