组件不会在路由更改时重新渲染答案

【问题标题】：Component not rerendering on route changing组件不会在路由更改时重新渲染
【发布时间】：2020-01-02 18:48:31
【问题描述】：

我正在使用 React Hooks 并且我的状态（模块名称）没有得到更新，即使道具（我从路由中获得）发生了变化？我需要使用 moduleName 来使用 Effect Dependencies 来进行 Api 调用。我也在我的组件中使用 withRouter ，但是当路由更改时它似乎不会重新渲染我的组件。我的 App.js 看起来像这样

       <Router>
        <Fragment>
          <Switch>
            <Route path="/" exact={true} component={Login} />
            <Route component={Routes} />
          </Switch>
        </Fragment>
      </Router>

并且在我需要在路由更改时重新渲染的组件上我有这个

const ListView = (props) =>{  
const [moduleName, setModuleName] =useState(props.match.params.moduleName);

useEffect(() => { 
//api call here
}, [moduleName]);
}

export default connect(
mapStateToProps,
null
)(withRouter(ListView));**

【问题讨论】：

而不是 moduleName 提供 props.match.params.moduleName 作为对 useEffect 的依赖。
是的，可以，但是我在很多地方都使用了 moduleName，不想让它看起来硬编码，问题是组件重新渲染，但 state moduleName 没有更新为新值
为此您需要在useEffect 中执行setModuleName(props.match.params.moduleName)
也这样做了，但不能正常工作。例如，我更改了一次路由，没有任何反应，但是当我第二次更改路由时，moduleName 会使用上一个路由参数值进行更新
你需要在适当的地方调用setModuleName，可能是在你的API调用成功之后。

标签： reactjs react-router

【解决方案1】：

你应该在 useEffect Hook 中监听 prop 的变化，并且你不需要为 prop 保存状态，所以你可以删除 useState 钩子

const ListView = (props) =>{  

  useEffect(() => { 
    let moduleName = props.match.params.moduleName
    if(moduleName) {
       console.log(props.match.params.moduleName) 
      // do something when moduleName changes
      // api call
      axios.get('someurl/'+moduleName)
    }
  }, [props.match.params.moduleName]);
}

export default withRouter(connect(mapStateToProps,null)(ListView));

【讨论】：