Javascript 为什么useDispatch重新呈现父组件？

我正在树组件（来自Ant库）的

onSelect

回调中使用useDispatch钩子（来自Redux）：

export const MyComponent=（）=>{
const dispatch=usedpatch（）；
const onSelect=（selectedNode）=>{
const selectedItem=selectedNode[0]；
调度（fetchSelectedItems（selectedItem））；
};
返回
（调度）=>
axios({
url:`/api/items？id=${selected}`，
方法：“GET”，
})。然后（响应=>{
调度（fetchSelectedItemsAccess（response.data））
}).catch（（错误：any）=>{throw（错误）}）；

---

为什么

useDispatch

重新呈现父组件？有什么方法可以防止这种情况发生吗？我尝试了

useCallback

就像在Redux文档中一样，但它是为了防止子组件重新呈现，而不是父组件。

我认为在每次呈现时，您都在重新定义onSelect函数。函数是引用t类型。在ever render上传递重新声明的函数及其新引用将导致重新渲染。也许您应该研究一下使用上下文。

看起来我在中的假设是正确的

因此，我将向您展示解决方法。
您可以将容器中使用

clickValue

的零件提取到另一个组件，例如

clickValue

这样做只会将更新隔离到

ClickValue

组件

我的叉子：

函数ClickValue（）{
常量clickValue=useSelector（state=>state.value）；
console.log（clickValue）；
返回点击值；
}
导出默认函数容器（）{
返回(
容器
);
}

查看下面的配置文件结果

---

我的组件重新渲染问题是由父组件中使用的

useSelector

引起的，我直接引用了

状态

。最可能的原因是该选择器的新结果

解决方案：

---

我用重写了此选择器，以使其成为备忘录（此处的一条评论建议将其删除，但我不知道为什么会将其删除）。我完全按照redux文档中的说明进行了操作。

Hi@kriz欢迎使用堆栈溢出。您能提供

fetchSelectedItems

和家长的代码吗？（因为父级使用通过

fetchSelectedItems

检索的数据，那么父级将重新提交）。A将非常好。即使我执行一些类似

dispatch（{type:'some\u ACTION\u NAME'）的“虚拟”分派，也会发生这种情况

这是否会导致父级重新渲染？对任何位置的任何属性的任何引用更改都会导致从子级重新渲染，而不是从父级重新渲染。如果在组件中声明函数，则导致父级进入渲染周期的任何状态更改都会生成新函数。这正是您无法在函数中执行去抖动的原因你需要使用useCallback钩子。谢谢你。当你需要呈现一些东西时，它会很有帮助。在我的情况下，我需要传递值，所以最后我使用重新选择库重写了选择器，现在它们被修改了，这解决了我的问题。欢迎你分享答案。你能添加你的解决方案作为回复并把它标记为答案？

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)});