如何在 React 中从 state object 中删除属性？

Question

以下是 state object 的属性：

  const [items, setItems] = useState({
    key1: 'apple',
    key2: 'watermelon',
    key3: 'banana',
  });

我想知道，如何通过处理删除从这个 state object 中删除特定属性？

 const handleDelete = (e) => { }

提前致谢

Answer 1

这是一种方法：复制 object（因此 React 会注意到更改）， 删除密钥（可能这是您缺少的 JavaScript 功能），然后设置 Z9ED39E2EA931586B6A985A6942EF573

const handleDelete = (e) => {
  const newItems = {...items};
  delete newItems.key2; // or whichever key you want
  setItems(newItems);
}

我很好奇是否有一个Object助手可以在一行中完成这一切。

@Wyck 找到了一种更简洁的方法，它使用解构赋值的“休息”方面：

const handleDelete = (e) => {
  const {key2, ...newItems} = items; // newItems gets all but key2
  setItems(newItems);
}

Answer 2

最好的方法是使用setState中的callback function ，然后返回新的 object。

setItems(prevState => {
    const {key2, ...newItems} = prevState;    
    return newItems;
});     

如果您使用此方法，请将您的deleteElement包装在useCallback挂钩中并将项目添加到依赖items列表中：

const deleteElement = useCallback((e) => { … }, [items]);

将此与@edemaine 解决方案结合使用☺️