当我在数组对象中通过id更改元素中的数据时,它复制到所有元素



我刚开始使用react。为了存储数据,我使用了一个对象数组。我特意创建了一定长度(100),以便使用id安全地添加用户响应(id乱序,可以先回答1,再回答3)。我写了一个函数,将一行添加到0数组元素(数组不能被删除,它被使用),但是由于某种原因,元素的值在整个数组中是重复的。为什么会发生这种情况,如何解决?

<变量/strong>

const [ans,setAns] =useState(Array(100).fill({
Answer:[''],
}))

function SetWordAnswer(answer) {
let next = [...ans];
next[0].Answer[0] =answer
setAns(next)
console.log(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)}}/>: ''}

<使用数据/strong>链接

函数后的新数据链接

您可以用一个虚拟值填充数组,然后使用.map()不同的对象填充它您想要的形式:

const [ans,setAns] = useState(Array(100).fill(null).map(() => ({
Answer:['']
})));

所有元素最初看起来都相似,但它们将是不同的对象。

最新更新