javascript - 使用 useState 时，React 不会在状态更改时重新渲染

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)删除问题时，它总是会删除错误的问题。当试图解决这个问题时，我控制台将问题数组记录在状态中，发现新问题不在数组中，而且根据我单击的问题组件，我也会得到不同的结果。您可以在提供的图像中看到我得到的结果。

quiz form with 2 questions

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

我不知道为什么会发生这种情况，如果有人能解释这里发生了什么，我将非常感激。

干杯!

Answer 1

如果您要修改数组(除了添加内容之外的任何方式)，则不能使用该键。来自 the documentation :

We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny’s article for an in-depth explanation on the negative impacts of using an index as a key.

(我的重点)

另请注意，对 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));
   };
};

该示例不处理计数问题。如果问题确实需要计数，则在添加/删除时必须重新创建所有问题。我将把它作为练习留给读者，希望您无论如何都不需要对 Question 进行 count...