NextJS/React动态列表新增/删除操作后视图未更新问题求助

问题根源 #

你在更新数组状态时没有创建新的数组实例，直接修改了原数组的引用。React 对 useState 状态的更新判定采用浅比较，当你直接用push修改原数组后，数组的内存地址没有发生变化，React 会认为状态没有更新，因此不会触发重渲染。只有当其他状态变动触发组件重渲染时，才会读取到已经被修改的数组内容，展示最新的列表。

你写的添加物料逻辑中，_material = allSelectedMaterials 这一步是直接把原有状态数组的引用赋值给了_material，后续的push操作实际修改的是原状态数组，再把同一个引用传给setAllSelectedMaterials，自然无法触发重渲染。

修复代码 #

const handleAddSelectedMaterial = () => {
    // 用find查找匹配物料，替代无意义的map遍历
    const targetMaterial = loadedMaterials.find(material => {
        const key = Object.keys(material)[0]
        return key == currentSelectedMaterial
    })
    if (targetMaterial) {
        const key = Object.keys(targetMaterial)[0]
        // 基于原有状态创建新数组，修改引用触发React重渲染
        setAllSelectedMaterials(prev => [...prev, { [targetMaterial[key].id]: targetMaterial[key] }])
    }
}

优化建议 #

• 你当前把每个数组项存为单key对象的写法冗余，可以直接把物料对象存在数组中，直接取物料id作为列表渲染的key，不用每次调用Object.keys取值
• 列表渲染的key尽量使用稳定的唯一值，不要用索引或者动态生成的字符串，避免出现列表渲染错乱的问题

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