React中用includes检测数组对象item属性匹配始终返回false如何解决

你的判断逻辑存在两个明显错误，和Apollo返回的对象类型没有关系：

• 你写的[data1].includes(data2.item)完全不符合预期：data1本身已经是包含2个对象的数组，外层套方括号会把整个data1数组作为唯一元素，生成一个长度为1的嵌套数组，结构为[ [/* data1里的两个对象 */] ]。你拿字符串类型的data2.item去和这个嵌套数组里的数组元素做匹配，结果永远是false。
• 你尝试过的data1.item[1].item写法本身存在语法问题：data1是数组，不存在顶层item属性，直接访问data1.item会得到undefined，后续索引取值自然无法得到正确结果。

Array.includes只会匹配数组直接存储的元素，不会自动遍历元素内部的属性，因此不能直接用来判断对象数组的某个属性值是否存在。以下两种方法都可以实现需求，且数组长度增长时依然有稳定的性能表现：

方法1：使用Array.some()（推荐） #

some()方法会遍历数组，只要有任意一个元素满足判断条件就会立刻终止遍历返回true，所有元素都不满足时返回false，大数组场景下性能最优：

const onSubmit = (data: any) => {
  console.log(data1)
  console.log(data2)
  console.log(data2.item)
  // 匹配data1中是否存在item属性等于data2.item的元素
  const isMatch = data1.some(listItem => listItem.item === data2.item)
  console.log(isMatch) // 示例场景下会输出true
}

如果担心Apollo返回的数据存在空值，可以加可选链避免运行时报错：

const isMatch = data1?.some(listItem => listItem?.item === data2?.item)

方法2：提取属性数组后用includes #

如果后续需要复用所有item的取值列表，可以先通过map把所有元素的item属性提取为一个纯原始值数组，再调用includes判断：

// 提取得到所有item值组成的数组：['Crayons', 'Taco']
const allItemValues = data1.map(listItem => listItem.item)
const isMatch = allItemValues.includes(data2.item)

对存储对象的数组直接调用includes时，只有传入的参数和数组中存储的对象是同一个引用（内存地址完全一致）才会返回true，includes不会自动做对象属性的深度对比，不要用它来判断对象的属性值是否匹配。

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