React中如何通过id删除localStorage存储的数组对象对应条目

实现方案 #

1. 修改删除逻辑函数 #

替换原有的基于索引的onRemove方法，改为通过id过滤数组：

const onRemove = (targetId) => {
  // filter会返回排除了对应id条目的新数组，不会修改原状态，符合React immutable规范
  const filteredList = dataAll.filter(item => item.id !== targetId)
  // 直接调用useLocalStorage提供的set方法，会自动同步最新值到localStorage
  setDataAll(filteredList)
}

2. 调整删除按钮的传参 #

在列表渲染的删除按钮处，传入当前条目的id：

<Button onClick={() => onRemove(singleData.id)}>删除</Button>

冗余代码优化建议 #

你现有代码中监听dataAll变化手动写入localStorage的useEffect是多余的，useLocalStorage钩子本身已经实现了状态变化自动同步到localStorage的逻辑，这段代码可以直接删除，同时你也不需要再手动调用localStorage.setItem和页面刷新方法，状态更新后React会自动重渲染对应内容。

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