React中优化带条件的状态更新：如何避免两次map操作？

你可以把条件判断移到map内部的对象构建逻辑里，只需要一次map就能完成状态更新，同时避免重复代码：

简洁版写法 #

const changeStatus = (id, newStatus, comment) => {
  axios
    .post("http://localhost:5000/changeStatus", {
      id,
      status: newStatus,
      comment
    })
    .then((res) => {
      setStatus(prevStatus => prevStatus.map(val => 
        val.id === id 
          ? {
              ...val,
              status: newStatus,
              // 仅当comment有长度时，才添加该字段
              ...(comment?.length && { comment })
            }
          : val
      ));
    });
};

更易读的版本（适合新手理解） #

如果觉得上面的条件展开语法有点绕，也可以用更直白的方式：

const changeStatus = (id, newStatus, comment) => {
  axios
    .post("http://localhost:5000/changeStatus", {
      id,
      status: newStatus,
      comment
    })
    .then((res) => {
      setStatus(prevStatus => prevStatus.map(val => {
        // 不是目标项直接返回
        if (val.id !== id) return val;
        
        // 先基础更新状态
        const updatedItem = { ...val, status: newStatus };
        // 有有效comment时再添加字段
        if (comment?.length) {
          updatedItem.comment = comment;
        }
        return updatedItem;
      }));
    });
};

额外优化点 #

• 原代码里参数status和状态变量status重名了，容易造成混淆，我改成了newStatus，代码可读性更好
• 使用prevStatus作为setStatus的回调参数，确保拿到的是最新的状态值，避免闭包导致的旧状态问题

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