Question

我有一个名为Home的React组件，该组件正在调用一个操作，以便在组件安装时获取一些组。

我正在调用以下操作：

componentDidMount() {
    const { fetchRecentGroups } = this.props;
    fetchRecentGroups();
}

我的减速器可以很好地拾取每个动作，并返回如下状态：

switch(action.type) {
    case REQUEST_GROUPS:
        return {
            ...state,
            loadState: FETCHING
        };
    case REQUEST_GROUPS_SUCCESS:
        return {
            ...state,
            loadState: SUCCESS,
            groups: action.data.groups,
            totalResults: action.data.totalResults
        };
    default:
        return state;
}

我还在此组件上使用connect HOC，如下所示：

const mapStateToProps = (state) => {
  return {}
}

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

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

Home组件像这样放置在Route内：

<Route 
    exact={true} 
    path="/" 
    component={Home} 
/>

我的问题是，每当化简器返回一个状态时，componentDidMount就会被循环调用一次。我希望安装在第一次加载时只会发生一次。

如果我将componentDidUpdate和componentWillReceiveProps函数放入组件中，它们将永远不会被调用（仅componentDidMount），因此我无法比较道具。

有人知道为什么会这样吗？

编辑：

我发现我的问题是由我的路线中的这段代码引起的：

const RouteBlock = () => {
  if(errorSettings) {
    return <Error {...errorSettings} />
  }
  return (
    <div className={styles.RouteBlock}>
      <Route exact={true} path="/" component={Home} />
      <Route path="/search" render={() => <div>SEARCH</div>} />
    </div>
  );
};

return <Router><RouteBlock /></Router>

我将其更改为：

return <Router>{RouteBlock()}</Router>

Answer 1

每次渲染组件时，您都会立即调用设置新状态的函数，并触发组件的重新渲染。也许您应该使用shouldComponentUpdate生命周期方法，该方法将检查您的旧状态是否与新状态相同。

查看官方文档：https://reactjs.org/docs/react-component.html#shouldcomponentupdate

为什么每次执行操作后都要安装我的React组件？

1 个答案: