谢谢你的 comments 和帮助.

https://codesandbox.io/s/magical-butterfly-uk0fjq?file=/src/item.js

这可能会帮助你解决问题.

所以问题是,如何继续防止未被删除的项目重新呈现,尽管父级(ItemList)重新呈现.

console显示Item渲染.

如前所述,我使用了useMemo+useCallback组合,但结果证明不稳定.

希望这个例子能对你有所帮助,并且更加明确.

EDIT

关于consolelog,奇怪的是,Sandbox 示例记录了2次App、2次ItemList和12次Item,而在计算机上它只记录了1-1-6次

推荐答案

所以,如果你想最小化项目的重新渲染,你需要确保几件事

记忆该组件

你可以在你想要的组件上使用React.memo,这将防止在props /状态不变时重新渲染.

所以,使用

export default React.memo(Item);

而不是

export default Item;

确保props 是一样的

渲染Item组件时,将deleteItem作为一个props 传递,该props 具有从App组件接收的值.但是,这个函数不是一个稳定的函数(每次应用程序组件呈现时都会重新定义它.由于App保持items状态,因此每次删除后它都会重新呈现.这将触发一个新的deleteItem来定义,这将导致Item重新呈现.

要使其稳定,需要两件事.

  1. to 使用 React.使用Callback which re-使用s the same function when its dependencies remain the same.
  2. 使用 the function form of the setItems

so, 而不是

const deleteItem = (newItem) => {
  const newItemList = items.filter(
    (item) => item.reference !== newItem.reference
  );
  setItems(newItemList);
};

使用

const deleteItem = React.使用Callback((itemToDelete) => {
  setItems((currentItems) =>
    currentItems.filter((item) => item.reference !== itemToDelete.reference)
  );
}, []);

你的代码中也有一个问题,你需要输入.map个数据,但是在返回每个Item之前,你需要把它放入一个数组中,然后返回它.把<Item ..>还我就行了

So 而不是

    {props.data.map((item, index) => {
      const newList = [];
      newList.push(
        <Item
          deleteItem={props.deleteItem}
          key={item.reference}
          item={item}
        ></Item>
      );
      return newList;
    })}

    {props.data.map((item, index) => {
      return (
        <Item
          deleteItem={props.deleteItem}
          key={item.reference}
          item={item}
        ></Item>
      );
    })}

更新了所有更改的codesandbox:https://codesandbox.io/s/twilight-water-9iyobx

Javascript相关问答推荐

函数返回与输入对象具有相同键的对象

如何迭代叔父元素的子HTML元素

在运行时使用Next JS App Router在服务器组件中运行自定义函数

try 使用javascript隐藏下拉 Select

如何使用JS创建一个明暗功能按钮?

如何在 Select 文本时停止Click事件?

Jest toHaveBeenNthCalledWith返回当前设置的变量值,而不是调用时的值

向数组中的对象添加键而不改变原始变量

在查看网页时,如何使HTML中的按钮工作方式类似于鼠标上的滚轮或箭头键?

用于测试其方法和构造函数的导出/导入类

本地损坏的Java脚本

如何在移动设备中使用JAVASSCRIPT移除点击时的焦点/悬停状态

在Puppeteer中使用promise进行日志(log)记录时出现TargetCloseError

如何创建一个for循环,用于计算仪器刻度长度并将其放入一个HTML表中?

我如何才能让p5.js在不使用实例模式的情况下工作?

使用Java脚本在div中创建新的span标记

单击子按钮时将活动切换类添加到父分区

如何在 map 中显示美国州/加拿大省的缩写-第1部分?

将表单数据转换为多维数组

JavaScript待办事项列表不能取消选中或删除任务(最后一个除外)