Question

我有两个组件，在我的componentDidMount生命周期方法中，我发出ajax调用请求以从服务器获取所有项目。

//Routes in primary parent component that render 2 components
    <div className="primary">
      <Switch>
        <Route path="/admin/manage-regions" exact component={() => 
              <ManageRegions />} />
        <Route path="/admin/manage-practices" exact component={() => 
               <ManagePractices />} />
      </Switch>
    </div>
//First component
  componentDidMount() {
    console.log('called twice');
    const { getAllRegionsAction } = this.props;
    getAllRegionsAction({ path: 'regions', filterName: 'regions' });
  }

//Second component
 componentDidMount() {
    console.log('called twice');
    const { getAllPracticesAction } = this.props;
    getAllPracticesAction({ path: 'practice', filterName: 'practices' });
  }


export default connect(
 null,
  {
    getAllRegionsAction: getAllFilters,
  },
)(MyFirstComponent);

export default connect(
 null,
  {
    getAllPracticesAction: getAllFilters,
  },
)(MySecondComponent);

问题是我的componentDidMount方法被调用了两次。因此，我将两个操作（GET_ALL_FILTERS）推送到我的商店，而不是一个，这就是为什么我从服务器收到两个响应而不是一个响应的原因。它看起来像：“组件被渲染组件被删除组件被渲染”（甚至在视觉上）。我已经在componentWillUnmount方法中进行了检查。确实，在初始加载期间，先渲染组件，然后将其删除，然后再调用另一个渲染，这就是为什么我在componentDidMount中得到两个console.log的原因。在这里研究了类似的问题之后，我尝试使用路由器，只留下一个组件，依此类推..但没有任何帮助。 componentDidMount仍然被调用两次。

Answer 1

组件是否在同一页面上？如果是，只需在其父组件中发出请求即可。如果没有，则可以在缓存中播放。

在初始组件加载过程中，componentDidMount生命周期方法被调用了两次（呈现-移除-呈现）

1 个答案: