React中map使用更新后的key仍未触发组件重渲染问题求助

问题根因 #

你触发状态更新的方式不符合React的不可变数据原则，直接修改了原有状态数组内部的对象属性，再将同一个数组引用传入setNewsImages，React做状态浅比较时会认为状态没有发生变化，因此跳过组件重渲染，就出现了控制台打印值已更新、但页面没有重新渲染的问题。

修复方案 #

修改generateNewsImages中的状态更新逻辑，生成全新的数组与修改后的对象，不要直接修改原有状态：

const generateNewsImages = (file) => {
    Api.Files.Upload(file)
        .then(response => {
            Api.News.GenerateImages(response.id)
                .then(response => {
                    // 生成新数组，不修改原有newsImages
                    const updatedNewsImages = newsImages.map(element => {
                        const matched = response.images.find(img => img.label === element.label);
                        if (matched) {
                            // 返回新对象，不修改原有对象属性
                            return {...element, file: matched.file};
                        }
                        return element;
                    });
                    setNewsImages(updatedNewsImages);
                })
                .catch(ErrorHandling.GlobalStateError);
        })
        .catch(ErrorHandling.GlobalStateError);
}

额外优化建议 #

你当前渲染项的key是动态拼接生成的，会随着file属性的存在与否发生变化，这会导致对应DOM节点不必要的卸载重挂载。建议直接使用稳定的唯一标识image.label作为key即可：

<div key={image.label}>

这样渲染性能会更优。

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