Question

我已经阅读了几个类似的问题，并在每个问题中都尝试了解决方案，但似乎没有一个起作用，并且与我使用React-router时不完全匹配我的用例。

在我的App.js中，我将refreshTokenId的值设置为某些UUID。我在App.js中有一个子组件，该子组件在初始渲染时会发送API调用以获取一些数据。现在，我已将refreshTokenId添加为对useEffect挂钩的依赖关系，该挂钩包含API调用。我正在使用react-router，并且当我从页面导航然后返回时，尽管依赖项（即refreshTokenId）并未更改，但API调用再次被触发。我通过在Redux开发工具中浏览时间并观察状态来确认这一点。第一次，也是唯一一次，refreshTokenId更改是在安装App.js时。这是因为我最初在App.js的useEffect中设置了refreshTokenId的值。

我不明白为什么在依存关系不变的情况下子组件中的useEffect会被触发。我在下面放置了一些代码来演示该问题：

childComponent:
const DataManager = (props) => {

    const refreshTokenId = props.refreshTokenId
    useEffect(() =>{
        props.datasetInfoRequest() 
    }, [refreshTokenId]); <---refreshTokenId does not change when routing around

const mapDispatchToProps =  dispatch => {
    return {
        datasetInfoRequest: () => dispatch(actions.datasetInfoInit())
}

const mapStateToProps = state => {
    return {
        refreshTokenId: state.refresh.refreshTokenId,
        lastRefreshed: state.refresh.lastRefreshed
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(DataManager);

App.js
const App = (props)=> {
    useEffect(()=>{
        props.refresh();
    },[]);

return (
    <div className="App">
            <Switch>
                <Route path = "/manager" component = {DataManager} />
                <Route path = "/index" component = {HomePage} />
                <Route path = "/logout" component = {Logout} />
            </Switch>
    </div>
  );
}
const mapDispatchToProps = dispatch => {
    return{
        refresh: () => dispatch(actions.appRefresh()) 
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(App);

Answer 1

您可以使用render代替component：

<Route path="/manager" render={DataManager} />

当您使用组件时，路由器会在每个渲染器上创建一个新组件。

当您使用渲染时，路由器将仅重新渲染组件。

如果需要，即对于类组件，可以传递一个返回JSX的函数：

<Route
  path="/manager"
  render={(props) => <DataManager {...props} />}
/>

尽管依存关系没有更改，但仍执行useEffect

1 个答案: