英文:
memoize react component callback in a list
问题
以下是您要的代码部分的中文翻译：
const SomeComponent = ({ items }: { items: ItemData[] }) => {
const getItemCallback = (item: ItemData) => (e: React.MouseEvent) => {
e.preventDefault();
// 使用 item 做一些操作
}
return <div>
{items.map(item => {
const callback = useCallback(getItemCallback(item));
return <Item title={item.title} itemCallback={callback} />
})}
</div>
}
请注意，上述翻译仅包括代码部分，没有其他内容。
英文:
How can I memoize a callback generated in the map loop? This (obviously) gives an error:
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>
}
答案1
得分: 1
包装 getItemCallback 在 useCallback 中，并将其传递给组件：
const SomeComponent = ({ items }: { items: ItemData[] }) => {
const getItemCallback = useCallback((item: ItemData) => (e: React.MouseEvent) => {
e.preventDefault();
// 对项目执行一些操作
}, []);
return <div>
{items.map(item => (
<Item
key={item.key}
item={item}
itemCallback={getItemCallback}
/>
)}
</div>
}
然后，组件调用回调函数，并传递 item 来创建一个经过 useCallback 包装的新函数：
const Item = ({ item, itemCallback }) => {
const callback = useCallback(itemCallback(item), []);
return (
// ...
);
}
英文:
Wrap getItemCallback in useCallback and pass it to the component:
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>
}
The component then calls the callback, and passes the item to create a new function wrapped with useCallback:
const Item = ({ item, itemCallback }) => {
const callback = useCallback(itemCallback(item), []);
return (
...
);
}
答案2
得分: 0
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} />;
};
英文:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
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} />;
};
<!-- end snippet -->
答案3
得分: 0
以下是您的代码的翻译部分：
const SomeComponent = ({ items }: { items: ItemData[] }) => {
const getItemCallback = (item: ItemData) => (e: React.MouseEvent) => {
e.preventDefault();
//对项目执行某些操作
}
return (
<div>
{items.map(item => {
const callback = useMemo(() => getItemCallback(item), [item]);
return <Item title={item.title} itemCallback={callback} />;
})}
</div>
);
};
英文:
The a updated version of your code using
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 = useMemo(() => getItemCallback(item), [item]);
return <Item title={item.title} itemCallback={callback} />;
})}
</div>
);
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论