Question

我正在使用React Hooks，即使prop（我从路由获得）更改了，我的状态（moduleName）也没有得到更新？我需要使用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));**

Answer 1

您应该在useEffect挂钩中监听道具更改，并且不需要保持道具的状态，因此可以删除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));

路线更改时组件未重新呈现

1 个答案: