我正在尝试使用迭代语句更新 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。

设置目标列表（新目标列表）；