我正在嘗試使用迭代語句更新 React 組件中的類名，但由於某種原因未更新類名。 怎么來的？

Question

這是一個簡單的待辦事項列表應用程序。 我正在使用三元條件來更新子組件（第三行）。 一旦用戶點擊第二個按鈕（最后一個按鈕），父組件中的 function 將被調用（作為 prop 屬性傳遞）並通過更新 isCompleted bolead 更新任務完成（再次點擊將撤銷決定）。 然而，雖然 object 正在更新屬性，但 className 不會更新。 問題和/或解決方案可能是什么？ 會不會是更新后子組件沒有重新渲染？ 提前致謝。 這是從子組件返回的部分：

GoalsList.map((item:IGoal)=>{
                          return  <div className='goal-content' key={item.id}>
                            <span className={item.isCompleted ?  'linethrough-true':''}>{`${item.isCompleted}  ${item.goal} to be completed in ${item.deadline} days.`} </span>
                            <span className='buttons-container'>
                            <button onClick={()=>{ 
                                deleteGoal(item.id);
                              }}> <TfiTrash className='icon icon-trash'/></button>
                              <button onClick={()=>{ 
                                completeGoal(item.id);}}><TfiCheck className='icon icon-check'/></button>
                            </span>
                          
                            </div>
                     })

這是處理父組件點擊的 function：

 const completeGoal=(goalCompleted:string):void=>{
        let newGoalsList=GoalsList; 
        newGoalsList.forEach((goal)=>{
        if (goalCompleted==goal.id)
          {
            if (goal.isCompleted==false)
              goal.isCompleted=true;
            else
              goal.isCompleted=false;
          }
          
      }
        );

        setGoalsList(newGoalsList);
        
  }

我希望在包含 className 的范圍內顯示的目標屬性將受到 className 更新的影響，並在每次 isCompleted 屬性更新為 true 時顯示一條線。

Answer 1

首先，你正在改變反應 state。

 let newGoalsList=GoalsList;

所以先避免這種情況。 避免這種情況的最佳方法是避免使用 forEach，而是替換為 map 並在迭代時添加邏輯，只需確保在更新 isCompleted 字段后返回新目標即可。 一些像這樣的東西。

 const newGoalsList = GoalsList.map((goal) => {
   if(goal.id === goalCompleted){
     return {...goal, isCompleted: !goal.isCompleted}
   } else {
      return {...goal}
   }
});

現在您可以設置您的 state。

設置目標列表（新目標列表）；