React js hooks 更新数组问题

Question

嗨，朋友们，

我是反应 js 的新手，我正在尝试根据 用户输入。但它为我的数组列表增加了新的价值。我只是 尝试根据索引更新数组中的值。我正在使用 以下代码。请帮助解决此问题。

注意：我正在使用打字稿进行开发

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => 
{
var question: QuestionDTO = tempQuestions[counter];
question.answer = event.target.value;
setTempQuestions((tempQuestions) => [...tempQuestions, question]);
};
const onClickHandler = () => {
if (tempQuestions.length !== counter + 1) {
setCounter(counter + 1);
console.log("hey value recevied " + JSON.stringify(tempQuestions));
} else {
console.log("use are completed" + tempQuestions);
props.sumbitHandler(tempQuestions);
}
};
// Html Code
<Input name="answer" onChange={handleChange}/>
<Button onClick={onClickHandler} />

Answer 1

即使您按索引访问数组元素，也会在更新状态时添加一个新元素。

您可以使用counter和Array.prototype.slice进行更新：

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const value = event.target.value;
setTempQuestions((tempQuestions) => [
...tempQuestions.slice(0, counter),
{...tempQuestions[counter], answer: value}, 
...tempQuestions.slice(counter + 1)
]);
};