在map函数中用if-else替代三元运算符设置状态时任务状态未定义

需求是双击任务时切换task对象的reminder属性，用for循环替代map的写法可以正常运行，但改用map+if-else的写法后，任务状态变成undefined，以下是代码对比和问题分析：

可正常运行的代码 #

教程原代码（三元运算符+map） #

setTasks(tasks.map((task) => 
  task.id === id ? { ... task, reminder : !task.reminder} : task
));

for循环版本 #

let tempTasks = [];
for(let i = 0; i < tasks.length; i ++){
  if(tasks[i].id == id){
    let newObj = {};
    newObj['id'] = tasks[i].id;
    newObj['text'] = tasks[i].text;
    newObj['day'] = tasks[i].day;
    if(tasks[i].reminder === true){
      newObj['reminder'] = false;
    }
    else{
      newObj['reminder'] = true;
    }
    tempTasks.push(newObj);
  }
  else{
    tempTasks.push(tasks[i]);
  }
}
setTasks(tempTasks);

无法正常运行的map+if-else代码 #

setTasks(tasks.map((task) => {
  if(task.id === id){
    task.id = task.id;
    task.text = task.text;
    task.reminder = true;
  }
  else{
    task = task;
  }
} ));

问题原因分析 #

1. map回调无返回值：map函数需要回调返回处理后的元素，你的代码用大括号包裹逻辑但未写return语句，导致每个迭代都返回undefined，最终setTasks接收到的是全为undefined的数组，任务状态自然异常。
2. 逻辑错误：未实现状态切换：你直接把task.reminder设为true，而不是切换它的布尔值（应该是!task.reminder），完全不符合需求。
3. 直接修改原对象：教程代码用解构{...task, reminder: !task.reminder}创建新对象，保证原数组不被修改；而你的代码直接修改原task对象，违反了immutable状态管理原则，容易引发其他副作用。
4. else分支无效：task = task这行代码没有任何作用，既不修改对象也不返回内容。

修正后的代码 #

写法一：补全return并创建新对象 #

setTasks(tasks.map((task) => {
  if(task.id === id){
    // 解构原对象，仅修改reminder属性，创建新对象返回
    return { ...task, reminder: !task.reminder };
  } else {
    // 返回原对象，不做修改
    return task;
  }
}));

写法二：简化逻辑（保留if-else但更简洁） #

setTasks(tasks.map(task => {
  return task.id === id ? { ...task, reminder: !task.reminder } : task;
}));

内容的提问来源于stack exchange，提问作者Yeo Bryan