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