TypeError：无法读取未定义的属性（读取“包含”）答案

【问题标题】：TypeError: Cannot read properties of undefined (reading 'includes')TypeError：无法读取未定义的属性（读取“包含”）
【发布时间】：2021-12-21 21:48:03
【问题描述】：

TypeError：无法读取未定义的属性（读取“包含”）。我犯了这个错误，但我无法通过并解决问题。错误显示这一行

     {addOption && addOption.length && (
                      <Select
                        onClick={(e) => e.stopPropagation()}
                        labelId="demo-customized-select-label"
                        id="demo-customized-select"
                        // value={addOption[i]}
                        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>

【问题讨论】：

addOption[i] 未定义的错误你能告诉我们什么包含变量 addOption 吗？
useEffect(() => { if (props.activeTab === 1) { setLoading(true); Service.getService(searchText, userId).then((response) => { setLoading( false); setItem(response); setAddOptionNumbers( Array.from(Array(response.length).keys()).map((key) => { return "Add Option"; }) ); setAddOption( Array.from( Array(response.length).keys()).map((key) => { return [1]; }) ); }); } }, [searchText, userId, props.activeTab]);

标签： javascript reactjs

【解决方案1】：

根据您的代码 sn-p addOption 是一个数组。因此，您应该对数组本身执行 include 方法，而不是对单个数组元素。在您的菜单项中检查一下：

<MenuItem value={X}>
   <Checkbox checked = { addOption.includes(X) } />
   <ListItemText> { addOptionNames[X-1] } </ListItemText>
</MenuItem>

【讨论】：

新错误：Select 组件与multiple 一起使用时，value 属性必须是一个数组。