React中修改数组对象元素后数据全数组重复的问题排查与解决

问题原因 #

• 你用Array(100).fill({Answer:['']})初始化数组时，fill方法对于引用类型（比如这里的对象），会把同一个对象的引用填充到数组的每一个位置。也就是说，数组里的100个元素其实都是指向同一个对象，修改其中任意一个元素的Answer值，其他所有元素都会跟着变，因为它们本质上是同一个对象。
• 另外你的处理函数里，let next = [...ans]只是做了数组的浅拷贝，数组里的对象还是原来的引用，所以修改next[0].Answer[0]的时候，还是在修改那个共享的对象。

修复方案 #

1. 正确初始化数组 #

需要为数组的每个位置创建独立的对象，避免共享引用。可以用Array.from或者map来实现：

const [ans, setAns] = useState(Array.from({length: 100}, () => ({
    Answer: [''],
})));
// 也可以用map方式初始化
// const [ans, setAns] = useState(Array(100).map(() => ({Answer: ['']})));

这样数组的每个元素都是独立的对象，修改其中一个不会影响其他元素。

2. 修改处理函数，确保状态更新的独立性 #

在更新数组元素时，要创建新的对象替换原位置的元素，而不是直接修改原对象的属性，这样React才能正确识别状态变化：

// 如果需要修改指定variableId对应的元素，把variableId传入函数
function SetWordAnswer(answer, variableId) {
    let next = [...ans];
    const targetIndex = variableId - 1;
    // 复制原对象并更新Answer属性，生成新对象
    next[targetIndex] = {
        ...next[targetIndex],
        Answer: [answer]
    };
    setAns(next);
}

对应的HTML元素修改为：

{VariableData.type === 'WordAnswer' ?
<input 
    placeholder="ответ" 
    type="text" 
    value={ans[variableId-1].Answer[0]} 
    className="my-4 p-2 text-gray-50 bg-gray-900 rounded-full" 
    onChange={(event)=>{SetWordAnswer(event.target.value, variableId)}}
/>: ''}

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