为什么useDispatch重新呈现父组件?

问题描述 投票:2回答:1

我正在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是为了防止子组件而不是父项重新呈现。

javascript reactjs redux react-hooks
1个回答
0
投票

我认为在每个渲染器上都需要重新声明onSelect函数。函数是引用类型。在曾经渲染时传递带有新引用的已重新声明的函数将导致重新渲染。也许您应该研究使用上下文。

© www.soinside.com 2019 - 2024. All rights reserved.