reactjs 在列表中存储React组件回调

uinbv5nw 于 2023-03-01 发布在 React

关注(0)|答案(2)|浏览(139)

如何记忆map循环中生成的回调函数？这（显然）会产生一个错误：

const SomeComponent = ({ items }: { items: ItemData[] }) => {
  const getItemCallback = (item: ItemData) => (e: React.MouseEvent) => {
    e.preventDefault();

    //do something with item
  }

  return <div>
    {items.map(item => {
      const callback = useCallback(getItemCallback(item));
    
      return <Item title={item.title} itemCallback={callback} />
    })}

  </div>
}

reactjs

来源：https://stackoverflow.com/questions/75577544/memoize-react-component-callback-in-a-list

2条答案

按热度按时间

j13ufse21#

将getItemCallback Package 在useCallback中并将其传递给组件：

const SomeComponent = ({ items }: { items: ItemData[] }) => {
  const getItemCallback = useCallback((item: ItemData) => (e: React.MouseEvent) => {
    e.preventDefault();

    //do something with item
  }, []);

  return <div>
    {items.map(item => (
      <Item 
        key={item.key}
        item={item} 
        itemCallback={getItemCallback} 
        />
    ))}
  </div>
}

然后，组件调用回调函数，并传递item以创建一个用useCallback Package 的新函数：

const Item = ({ item, itemCallback }) => {
  const callback = useCallback(itemCallback(item), []);
  
  return (
    ...
  );
}

赞(0）回复(0）举报 2023-03-01

xzv2uavs2#

const ItemList = ({ items }: { items: ItemData[] }) => {
  const getItemCallback = useCallback((item: ItemData) => (e: React.MouseEvent) => {
    e.preventDefault();

    //do something with item
  }, []);

  return (
    <div>
      {items.map(item => (
        <Item title={item.title} itemCallback={getItemCallback(item)} />
      ))}
    </div>
  );
};

const SomeComponent = ({ items }: { items: ItemData[] }) => {
  return <ItemList items={items} />;
};

赞(0）回复(0）举报 2023-03-01

我来回答

reactjs 在列表中存储React组件回调

2条答案

相关问题

热门标签

最新问答