使用 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：

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问题。 如果问题确实需要计数，则必须在添加/删除时重新创建所有问题。 我将把它留给读者作为练习，希望你无论如何都不需要count Question ......