来自子路由内部的 dispatch() 会导致无限循环

Question

My Parent.js使用 react-router-dom 的路由拆分为子组件，如下所示：

家长.js

return (
<div>
<Route
path={"/community/" +  data.community.slug + "/" + props.match.params.channel}
component={() => <Child {...props} />}
/>
<Route path={etc...}/>
<Route path={etc...}/>
</div>
)

当加载子节点时(基本上，当 url 与路由的path匹配时(例如/community/cars/repairs((，我必须调用一个端点，获取一些数据并通过调用dispatch()将其保存在存储中，如下所示：

孩子.js

useEffect(() => {
dispatch({ type: 'SAVE_DATA', payload: [{...}] });
},[props.match.params.channel]) // trying to call it when the channel portion of the url changes

问题是dispatch强制 Parent.js 重新渲染自身，从而调用包含<Route>的 return(( 部分，循环开始。

我如何实际使其正常工作？

更新/解决我的情况

基本上，如果您像这样调用路由，它就可以正常工作：

<Route path={"/community/" +  data.community.slug + "/" + props.match.params.channel} render={(routerProps)=> {
return <Child {...props} community={data.community}/>
}} />

Answer 1

这里的问题是你正在使用对 Route 的componentprop 的回调方法，该方法在每次重新渲染父组件时重新创建组件，从而导致子组件再次重新挂载，从而导致其useEffect被调用

您应该简单地将组件名称传递给componentprop 或使用renderprop

<Route
path={"/community/" +  data.community.slug + "/" + props.match.params.channel}
component={Child}
/>

或

<Route
path={"/community/" +  data.community.slug + "/" + props.match.params.channel}
render={(routerProps) => <Child {...routerProps} {...props} />}
/>