React嵌套表单UI未正确响应状态变更问题求助

问题核心原因 #

你遇到的问题本质是列表渲染时使用了不稳定的index作为key，加上删除操作依赖索引导致的：

• React通过key识别列表项唯一性，若用循环的index当key，删除某一项后剩余项的index会重排，React会误判最后一项被移除，从而出现UI显示错误。
• 后续交互崩溃则是因为删除后，原索引对应的状态项已不存在，访问undefined的属性引发报错。

解决方案步骤 #

1. 重构状态结构，为每个下拉框项添加唯一ID #

放弃用纯字符串数组存储下拉框状态，改为带唯一标识的对象数组，确保每个项有独立身份。可以用uuid库生成ID，或自己实现简单的ID生成逻辑。

2. 修改增删逻辑，基于唯一ID操作 #

不再依赖索引进行删除，而是通过ID匹配目标项，避免索引重排带来的问题。

3. 渲染时使用唯一ID作为key #

确保React能准确识别每个列表项，避免UI渲染错误。

具体代码修改 #

状态定义修改

// 先安装uuid：npm install uuid
import { v4 as uuidv4 } from 'uuid';

const [addConditions, setAddConditions] = useState([[{ id: uuidv4(), value: "" }]]);
const { formIndex } = useContext(FormContext);
const [eventValues, setEventValues] = useState([{
    // ...other properties
    conditions: [{ locked: [{ id: uuidv4() }] }],
    // ...
}]);

添加板块方法

const addSection = () => {
    setAddConditions(prev => [...prev, [{ id: uuidv4(), value: "" }]])
}

添加下拉框项方法

const addDropdownToSection = (sectionIndex) => {
    setAddConditions(prev => {
        const updated = [...prev];
        updated[sectionIndex].push({ id: uuidv4(), value: "" });
        return updated;
    });
    // 同步更新eventValues的locked数组
    setEventValues(prevValues => {
        const updatedEvents = makeDeepCopy(prevValues);
        if (!updatedEvents[formIndex].conditions[sectionIndex]) {
            updatedEvents[formIndex].conditions[sectionIndex] = { locked: [] };
        }
        updatedEvents[formIndex].conditions[sectionIndex].locked.push({ id: uuidv4() });
        return updatedEvents;
    });
}

删除下拉框方法

const removePropertyFromCondition = (sectionIndex, itemId) => {
    // 更新eventValues
    setEventValues(prevValues => {
        const updateEvents = makeDeepCopy(prevValues);
        const targetCondition = updateEvents[formIndex].conditions[sectionIndex];
        if (targetCondition?.locked) {
            targetCondition.locked = targetCondition.locked.filter(item => item.id !== itemId);
        }
        return updateEvents;
    });
    // 更新addConditions
    setAddConditions(prev => {
        const updated = makeDeepCopy(prev);
        updated[sectionIndex] = updated[sectionIndex].filter(item => item.id !== itemId);
        return updated;
    });
};

渲染下拉框时的修改

// 假设你渲染板块和下拉框的代码类似这样
{addConditions.map((section, sectionIndex) => (
    <div key={`section-${sectionIndex}`} className="section">
        {section.map((item) => (
            <div key={item.id} className="dropdown-item">
                <select
                    value={eventValues[formIndex].conditions[sectionIndex]?.locked?.find(lock => lock.id === item.id)?.value || ""}
                    onChange={(e) => {
                        // 找到对应ID的索引再调用修改方法
                        const innerIndex = eventValues[formIndex].conditions[sectionIndex].locked.findIndex(lock => lock.id === item.id);
                        handlePropertyInputChange(sectionIndex, innerIndex, "locked", e);
                    }}
                >
                    {/* 下拉选项 */}
                </select>
                <button onClick={() => removePropertyFromCondition(sectionIndex, item.id)}>删除</button>
            </div>
        ))}
        <button onClick={() => addDropdownToSection(sectionIndex)}>添加下拉框</button>
    </div>
))}

调整输入变更方法（可选优化）

可以改成基于ID直接修改，避免依赖索引：

const handlePropertyInputChange = (sectionIndex, itemId, stateType="locked", e) => {
    setEventValues(prevValues => {
        const updatedEvents = makeDeepCopy(prevValues);
        let targetCondition = updatedEvents[formIndex].conditions[sectionIndex];
        
        if (!targetCondition) {
            targetCondition = { locked: [] };
            updatedEvents[formIndex].conditions[sectionIndex] = targetCondition;
        }
        
        const { name, value } = extractValue(e);
        const targetItem = targetCondition[stateType].find(item => item.id === itemId);
        if (targetItem) {
            targetItem[name] = value;
        }
        return updatedEvents;
    });
};

额外注意事项 #

• 确保makeDeepCopy函数能正确深拷贝嵌套对象，避免意外修改原状态。如果不确定，可以用JSON.parse(JSON.stringify(prevValues))临时替代（注意：此方法不支持函数、Symbol等类型）。
• 所有列表项的key必须唯一且稳定，不要用随渲染变化的值作为key。

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