React中根据数组元素isNew状态区分展示不同模态框的问题

直接通过两个some判断组合出三种场景即可，核心思路是分别确认选中列表里是否存在新元素和是否存在旧元素，再根据两者的布尔值组合匹配对应场景：

// 假设selectedItems是用户选中的元素数组
const hasNewItem = selectedItems.some(item => item.isNew);
const hasOldItem = selectedItems.some(item => !item.isNew);

// 先处理空选中的情况（可选）
if (selectedItems.length === 0) {
  return;
}

if (hasNewItem && !hasOldItem) {
  // 仅选中isNew=true的元素，展示对应模态框
} else if (!hasNewItem && hasOldItem) {
  // 仅选中isNew=false的元素，展示对应模态框
} else if (hasNewItem && hasOldItem) {
  // 两种元素都选中，展示对应模态框
}

逻辑说明 #

• some(item => item.isNew)：遍历选中列表，只要找到第一个isNew=true的元素就返回true，否则返回false，用于判断是否存在新元素
• some(item => !item.isNew)：同理，判断是否存在旧元素
• 两个布尔值的组合刚好覆盖三种有效选中场景，且some的遍历效率比filter更高（无需遍历整个数组）

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