React不使用useState重新呈现状态更改

Question

我正在尝试创建一个问答应用程序，用户可以在其中向动态表单添加多个问题。在这个表单中，有一些问题组件，用户可以根据需要添加或删除。当用户单击新的问题处理程序(handleNewQuestion(时，一个新问题会连接到组件状态的问题数组中。

const handleNewQuestion = () => {
setQuestions([
...questions,
<Question
key={questions.length}
count={questions.length}
formData={formData}
setFormData={setFormData}
handleRemoveQuestion={handleRemoveQuestion}
/>
])
}
<Button onClick={handleNewQuestion} variant="outline-primary">
New Question
</Button>

我遇到的问题是，每当我试图用删除问题处理程序(handleRemoveQuestion(删除问题时，它总是删除错误的问题。当试图解决这个问题时，我控制台记录了状态下的问题数组，发现新问题不在数组中，而且根据我单击的问题组件，我会得到不同的结果。你可以在提供的图像中看到我得到的结果。

包含2个问题的测验表

本质上，发生的事情是，根据我试图删除的问题组件，控制台显示处于不同状态的问题数组。例如，当我试图删除第一个问题组件时，我会得到一个空数组，而当我单击第二个问题组件后，我会获得一个包含一个元素的数组。即使呈现了多个问题，如果我试图删除第一个问题，我仍然会得到一个空数组。

我不知道为什么会发生这种事，如果有人能解释一下这里发生了什么，我将不胜感激。

欢呼！

Answer 1

如果您正在修改数组(除了添加到数组之外的任何方式(，则不能使用key。来自文件：

如果项的顺序可能发生变化，我们不建议对键使用索引。这可能会对性能产生负面影响，并可能导致组件状态出现问题。查看Robin Pokorny的文章，深入解释使用索引作为关键字的负面影响。

(我的重点(

此外，请注意，您对setQuestions的调用中没有任何内容会更新现有问题的count，这似乎是一个问题。

为您的问题分配唯一的ID，并在删除问题时使用这些ID。如果问题本质上没有唯一的ID，那么给它们一个ID的一种方法是在组件之外使用一个变量，该变量给出要使用的"下一个"ID：

let nextQuestionId = 1;
const YourComponent = props => {
// ...
const handleNewQuestion = () => {
setQuestions([
...questions,
<Question
key={nextQuestionId++}
count={questions.length}
formData={formData}
setFormData={setFormData}
handleRemoveQuestion={handleRemoveQuestion}
/>
]);
};
const removeQuestion = id => {
setQuestions(questions.filter(q => q.id !== id));
};
};

这个例子没有处理count问题。如果问题确实需要计数，则在添加/删除时必须重新创建所有问题。我将把它作为一个练习留给读者，希望你无论如何都不需要Question上的count。。。