Question

我的Parent.js使用react-router-dom的Route分成子组件，如下所示：

Parent.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()像这样：

Child.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的component属性使用了一种回调方法，该方法在每次重新渲染Parent组件时都会重新创建该组件，从而导致子组件再次重新挂载，这会导致其useEffect被称为

您只需将组件名称传递给component属性或使用render属性

 <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} />}
   />

来自子路由内部的dispatch（）导致无限循环

1 个答案: