useEffect 在依赖没有变化的情况下执行

Question

我已经阅读了几个类似的问题并尝试了每个问题的解决方案，但 none 似乎有效并且与我的用例不完全匹配，因为我正在使用 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} />

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

当您使用 render 时，路由器只会重新渲染组件。

如果需要，即对于 class 组件，您可以传递一个 returns JSX:

的函数

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

useEffect 在依赖没有变化的情况下执行

useEffect executing despite no change in dependency

reactjs

redux

react-redux

use-effect