Function 只需重新渲染一次

Question

我遇到了這個 Function 的問題。 當我觸發此 function 時，它只會將組件重新渲染為第一個觸發器。 之后就沒有了。 我找不到問題:(

    function selectAnswer(id, questId) {
        let newArr = questions
        
        for(let i = 0; i < newArr.length; i++){
                
                if(questId === newArr[i].id){
                    const changedAnswers = newArr[i].answers.map(answer => {   
                    return answer.id === id ? 
                    {...answer, selected: !answer.selected} : 
                    {...answer, selected: false}
                    })
                
                newArr.forEach(element => {
                    if(questId === element.id){
                            element.answers = changedAnswers
                     }
                    })
                }
                     
        }   
            setQuestions(newArr)            
    }

Answer 1

您永遠不會真正更新 state。 這不會創建數組的副本，它只是復制對數組的引用：

let newArr = questions

所以這不是將 state 設置為新數組，而只是對同一數組的引用：

setQuestions(newArr)

此外，您不是創建新的 state，而是改變現有的 state：

element.answers = changedAnswers

首先創建一個新數組，即使它包含與原始數組相同的元素：

let newArr = [...questions];

然后，當您想要修改其中一個元素時，您可以將其替換為新元素，而不是修改現有元素。 因此，而不是這種結構：

newArr.forEach(element => {

});

您可以用.map()代替您的新數組：

newArr = newArr.map(element => {

});

在該.map()中，您將返回未修改的 object 或替換 object：

newArr = newArr.map(element => {
  if(questId === element.id) {
    return {...element, answers: changedAnswers};
  } else {
    return element;
  }
});

總體而言，這里的想法是您不想遍歷現有數組、修改其值並將該數組設置回 state。 這不是 React 意義上的“更新狀態”，而是“變異狀態”。 相反，創建一個新數組並用您想要的對象填充它。 這些對象可以是現有數組中未更改的對象和現有數組中替換（未修改）的對象的混合。