TypeError: 无法读取undefined的属性'includes'问题求助

嘿，这个错误其实很好定位——问题出在你代码里的addOption[i]是undefined，当你试图调用它的includes()方法时，自然就会抛出这个类型错误。

为什么会出现这个问题？ #

大概率是这两种情况之一：

• addOption数组的长度不足，i的索引超出了数组的有效范围（比如数组只有3个元素，但i取到了3）
• addOption数组里的某个元素没有被正确初始化为数组（比如某个位置是null或undefined，而不是用来存储选中值的数组）

快速修复方案 #

你可以给addOption[i]加一个兜底的空数组，或者用可选链操作符来避免报错，具体改法如下：

方法1：使用空数组兜底

把原来的addOption[i].includes(xx)改成(addOption[i] || []).includes(xx)，这样即使addOption[i]是undefined，也会用空数组替代，空数组的includes()会返回false，正好对应未选中的状态。

修改后的代码片段：

{addOption && addOption.length && (
  <Select
    onClick={(e) => e.stopPropagation()}
    labelId="demo-customized-select-label"
    id="demo-customized-select"
    value={addOption[i]}
    multiple
    onChange={(ev) => handleadd(ev, i)}
    renderValue={() => { return selectedOptionNames[i]; }}
    input={<BootstrapInput />}
  >
    <MenuItem value={1} disabled> FILE </MenuItem>
    <MenuItem value={2}>
      <Checkbox checked={(addOption[i] || []).includes(2)} />
      <ListItemText>{addOptionNames[1]}</ListItemText>
    </MenuItem>
    <MenuItem value={3}>
      <Checkbox checked={(addOption[i] || []).includes(3)} />
      <ListItemText>{addOptionNames[2]}</ListItemText>
    </MenuItem>
    <MenuItem value={4}>
      <Checkbox checked={(addOption[i] || []).includes(4)} />
      <ListItemText>{addOptionNames[3]}</ListItemText>
    </MenuItem>
  </Select>
)}

方法2：使用可选链操作符

如果你用的是ES2020及以上的环境，也可以用?.可选链：

<Checkbox checked={addOption[i]?.includes(2)} />

这样当addOption[i]是undefined时，表达式会直接返回undefined，而Checkbox的checked属性接收到undefined会被当作false处理，同样能避免报错。

根本解决建议 #

除了快速修复，你最好排查一下根源：

• 检查addOption数组的初始化逻辑，确保每个元素都被初始化为空数组（比如const addOption = Array.from({length: 某个长度}, () => [])）
• 确认循环中i的取值范围，比如如果是用map循环，确保i不会超出addOption的长度

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