JavaScript/React对象数组更新异常：条件不满足时数组为空如何解决？

你的核心问题在于循环调用setAttendanceData，以及处理无匹配项时的逻辑漏洞。每次遍历userList都会生成新数组并覆盖状态，最后一次遍历的结果会冲掉前面所有修改；另外当无匹配项时，错误的索引判断逻辑可能导致意外结果。

修复后的代码 #

// 一次性处理整个userList，生成完整的新数组
const updatedAttendance = userList.map((item) => {
  // 找到当前item对应的所有dailyData项
  const matchedData = dailyData.filter(value => value.author === item.MSM);
  
  // 如果有匹配项，更新字段；否则返回原对象
  if (matchedData.length > 0) {
    return {
      ...item,
      storeTimeIn: matchedData[0].store,
      timeIn: matchedData[0].date_posted,
      storeTimeOut: matchedData[matchedData.length - 1].store,
      timeOut: matchedData[matchedData.length - 1].date_posted
    };
  }
  
  // 无匹配项时返回原对象，保留原有数据
  return item;
});

// 只调用一次setState更新状态
setAttendanceData(updatedAttendance);

关键改进点 #

• 避免多次调用setState：原代码在userList.map里循环调用setAttendanceData，每次都会覆盖之前的状态，最终只保留最后一次遍历的结果。现在一次性处理完所有元素，仅调用一次状态更新，既高效又避免状态混乱。
• 简化匹配逻辑：直接对每个item查找匹配的dailyData项，无需额外通过findIndex找索引，逻辑更清晰。
• 保留无匹配项的原数据：当没有找到匹配的dailyData时，直接返回原item，不会丢失原有数据，解决了数组变空的问题。
• 安全访问匹配项：先判断matchedData.length > 0，再访问数组元素，避免undefined报错。

原代码的问题详解 #

1. 多次setState覆盖状态：假设userList有3个元素，你会调用3次setAttendanceData，每次都基于原始userList生成新数组，最后一次的结果会覆盖前两次的修改，相当于只处理了最后一个元素。
2. 无匹配时的索引错误：当newFilter为空时，newFilter[0]?.author是undefined，findIndex返回-1，此时newArr的map中idx == -1永远不成立，会返回原userList数组，但如果此时userList为空，或者你之前的状态被错误覆盖，就会出现数组变空的情况。

内容的提问来源于stack exchange，提问作者Mel Carlo Iguis