[英]How can I force update React.memo child component?
My main functional component performs a huge amount of useQueries and useMutations on the child component hence I have set it as React.memo so as to not cause re-rendering on each update.我的主要功能组件在子组件上执行大量的 useQueries 和 useMutations,因此我将其设置为 React.memo,以免在每次更新时重新渲染。 Basically, when new products are selected I still see the old products because of memo.
Basically, when new products are selected I still see the old products because of memo.
mainFunction.js mainFunction.js
const [active, setActive] = useState(false);
const handleToggle = () => setActive(false);
const handleSelection = (resources) => {
const idsFromResources = resources.selection.map((product) => product.variants.map(variant => variant.id));
store.set('bulk-ids', idsFromResources); //loal storage js-store library
handleToggle
};
const emptyState = !store.get('bulk-ids'); // Checks local storage using js-store library
return (
<Page>
<TitleBar
title="Products"
primaryAction={{
content: 'Select products',
onAction: () => {
setActive(!active)
}
}}
/>
<ResourcePicker
resourceType="Product"
showVariants={true}
open={active}
onSelection={(resources) => handleSelection(resources)}
onCancel={handleToggle}
/>
<Button >Add Discount to Products</Button> //Apollo useMutation
{emptyState ? (
<Layout>
Select products to continue
</Layout>
) : (
<ChildComponent />
)}
</Page>
);
ChildComponent.js子组件.js
class ChildComponent extends React {
return(
store.get(bulk-ids).map((product)=>{
<Query query={GET_VARIANTS} variables={{ id: variant }}>
{({ data, extensions, loading, error }) => {
<Layout>
// Query result UI
<Layout>
}}
</Query>
})
)
}
export deafult React.memo(ChildComponent);
React.memo()
is useful when your component always renders the same way with no changes. React.memo()
当你的组件总是以相同的方式呈现而没有变化时很有用。 In your case you need to re-render <ChildComponent>
every time bulk-id
changes.在您的情况下,每次
bulk-id
更改时都需要重新呈现<ChildComponent>
。 So you should use useMemo()
hook.所以你应该使用
useMemo()
钩子。
function parentComponent() {
... rest of code
const bulkIds = store.get('bulk-ids');
const childComponentMemo = useMemo(() => <ChildComponent ids={bulkIds}/>, [bulkIds]);
return <Page>
... rest of render
{bulkIds ?
childComponentMemo
:(
<Layout>
Select products to continue
</Layout>
)}
</Page>
}
useMemo()
returns the same value until buldIds
has not changed. useMemo()
返回相同的值,直到buldIds
没有改变。 More details about useMemo()
you can find here .您可以在此处找到有关
useMemo()
的更多详细信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.