我正在Tree组件(来自Ant库)的onSelect
回调中使用useDispatch钩子(来自Redux):
export const MyComponent = () => {
const dispatch = useDispatch();
const onSelect = (selectedNode) => {
const selectedItem = selectedNode[0];
dispatch(fetchSelectedItems(selectedItem));
};
return
<Tree
onSelect={onSelect}
>
<TreeNode .. />
<TreeNode .. />
<TreeNode .. />
</Tree
}
export const fetchSelectedItems = (selected: string) =>
(dispatch) =>
axios({
url: `/api/items?id=${selected}`,
method: 'GET',
}).then(response => {
dispatch(fetchSelectedItemsSuccess(response.data))
}).catch((error: any) => {throw(error)});
为什么useDispatch
重新渲染父组件?有什么办法可以防止这种情况?我尝试过useCallback
就像Redux文档中的一样,但是this solution是为了防止子组件而不是父项重新呈现。
我认为在每个渲染器上都需要重新声明onSelect函数。函数是引用类型。在曾经渲染时传递带有新引用的已重新声明的函数将导致重新渲染。也许您应该研究使用上下文。