React列表map循环中如何记忆化回调函数？当前写法报错

你当前的写法报错，核心原因是违反了React Hook的规则：useCallback只能在组件的顶层作用域调用，不能放在map循环的回调函数内部。下面是几种可行的解决方式：

方法一：使用带item参数的通用记忆化回调 #

创建一个接收item和事件对象的通用回调，用useCallback记忆它，然后在循环里给子组件传递一个箭头函数，调用时传入当前item：

const SomeComponent = ({ items }: { items: ItemData[] }) => {
  // 根据实际业务逻辑添加依赖项，比如用到的state或props
  const handleItemClick = useCallback((item: ItemData, e: React.MouseEvent) => {
    e.preventDefault();
    // 这里处理item相关逻辑
  }, []);

  return <div>
    {items.map(item => (
      <Item 
        key={item.id} // 必须添加唯一key，避免React渲染异常
        title={item.title} 
        itemCallback={(e) => handleItemClick(item, e)} 
      />
    ))}
  </div>;
}

注意：这种方式下每个Item的itemCallback仍是新的箭头函数，如果Item用React.memo包裹了，会导致子组件依然触发重渲染。

方法二：让子组件接收item和通用回调 #

调整子组件的props，让它直接接收item和通用回调，在子组件内部完成事件绑定：

// 子组件（用React.memo包裹以优化渲染）
const Item = React.memo(({ title, item, onClick }: { 
  title: string; 
  item: ItemData; 
  onClick: (item: ItemData, e: React.MouseEvent) => void 
}) => {
  return <div onClick={(e) => onClick(item, e)}>{title}</div>;
});

// 父组件
const SomeComponent = ({ items }: { items: ItemData[] }) => {
  const handleItemClick = useCallback((item: ItemData, e: React.MouseEvent) => {
    e.preventDefault();
    // 处理item逻辑
  }, []);

  return <div>
    {items.map(item => (
      <Item 
        key={item.id}
        title={item.title} 
        item={item}
        onClick={handleItemClick} 
      />
    ))}
  </div>;
}

这种方式下，传递给Item的onClick是记忆化的稳定引用，只要items中的对象引用不变，Item就不会因为回调变化而重渲染。

方法三：用Ref缓存每个item的回调 #

如果必须传递绑定了item的回调给子组件，可以用useRef创建一个缓存对象，存储每个item对应的回调：

const SomeComponent = ({ items }: { items: ItemData[] }) => {
  const callbacksRef = useRef<Record<string, (e: React.MouseEvent) => void>>({});

  // 当items变化时更新缓存的回调
  useEffect(() => {
    callbacksRef.current = items.reduce((acc, item) => {
      acc[item.id] = (e: React.MouseEvent) => {
        e.preventDefault();
        // 处理item逻辑
      };
      return acc;
    }, {} as Record<string, (e: React.MouseEvent) => void>);
  }, [items]);

  return <div>
    {items.map(item => (
      <Item 
        key={item.id}
        title={item.title} 
        itemCallback={callbacksRef.current[item.id]} 
      />
    ))}
  </div>;
}

这种方式能保证每个回调的引用稳定，适合需要严格控制子组件渲染的场景。

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