React+Material UI中setState数组filter删除元素失效问题咨询

原删除函数失效原因 #

DOM元素的id属性值是字符串类型，但你在filter里用index !== deletedId做严格比较时，index是数字类型，数字和字符串永远不相等，导致过滤后的数组和原数组完全一致，状态根本没更新。

修改后报错的原因 #

你修改后的deleteItem函数中，setListOfDocs的回调函数没有返回过滤后的数组，最终listOfDocs被设置为undefined，后续执行listOfDocs.map时自然会抛出Cannot read properties of undefined (reading 'map')的错误。

正确实现方式 #

写法1：类型转换+函数式更新 #

把DOM的id转为数字，同时用函数式更新确保拿到最新状态：

const deleteItem = ({ currentTarget }) => {
  const deletedIndex = Number(currentTarget.id);
  setListOfDocs(prev => prev.filter((_, index) => index !== deletedIndex));
};

写法2：直接传递索引（更简洁规范） #

无需依赖DOM的id，直接在map时把索引传给删除函数，还能避免多个元素id重复的HTML规范问题：

// 先修改删除函数，直接接收索引参数
const deleteItem = (targetIndex) => {
  setListOfDocs(prev => prev.filter((_, index) => index !== targetIndex));
};

// 然后在JSX的map调用时传入索引
{listOfDocs.map((item, index) => {
  return (
    <ListItem secondaryAction={<Checkbox />}>
      <ListItemAvatar>
        <Avatar>
          <DeleteIcon onClick={() => deleteItem(index)} />
        </Avatar>
      </ListItemAvatar>
      <ListItemButton>
        <ListItemText primary={item} />
      </ListItemButton>
    </ListItem>
  );
})}

另外提个小细节：原handleEnter里先setTextInputValue(target.value)又立刻setTextInputValue(null)是冗余操作，添加完项后直接设置为null即可。

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