REACT REDUX组件通过componentDidMount（）中的无限分派动作来无限渲染

Question

父组件只是一个展示组件，它使用UserContent子组件，在该子组件中调度redux操作并呈现数据：

父组件（用户管理）：

@HostListener('window:beforeunload')
  unloadHandler(event) {
    localStorage.removeItem('currentUser');
  }

子组件（用户内容）：

 <main className={classes.mainContent}>
  <Usercontent />
 </main>

我在App.js中的路线是：

class UserContent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      search: ""
    };
  }
 //The problem is here in componentDidMount()
  componentDidMount() {
    this.props.dispatch(userActions.getAll());
  }
 render() {
    const { classes } = this.props;

    if (!this.props.listofusers) {
      return <div>loading..</div>;
    }
    return (

     );
}

const mapStateToProps = state => {
  return {
    listofusers: Object.values(state.users)
  };
};

export default connect(mapStateToProps)(withStyles(styles)(UserContent));