1

我已经阅读了几个类似的问题并尝试了每个问题的解决方案，但似乎没有一个有效，并且与我使用 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);
4

1 回答 1

0

您可以使用render代替component：

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

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

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

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

<Route
  path="/manager"
  render={(props) => <DataManager {...props} />}
/>
于 2019-09-26T18:19:46.710 回答