React的onClick事件在页面渲染过后自动执行的问题

项目场景：

给LoadMore这个组件设置onClick事件，并用redux thunk 中间件让 action 创建函数返回一个函数。

---

问题描述

通过分析和调试发现的具体问题如下：
React的onClick事件在页面渲染过后自动执行的问题
组件代码：

import React, { Component } from "react";
import { Fragment } from "react";
import { ListItem, ListInfo, LoadMore } from '../style';
import { connect } from 'react-redux';
import * as actionCreator from '../store/actionCreator'
class ArticleList extends Component {
    constructor(props) {
        super(props);
    }
    render() {
        const { articleList, getMoreList } = this.props;
        return (
            <Fragment>
                {
                    articleList.map((item) => {
                        return (
                            <ListItem key={item.get('id')}>
                                <ListInfo>
                                    <h3 className="title">{item.get('title')}</h3>
                                    <p className="info">{item.get('info')}</p>
                                </ListInfo>
                                {/* <img src="https://upload-images.jianshu.io/upload_images/23868698-07ed2ab2a9c8a6c1.jpg?imageMogr2/auto-orient/strip|imageView2/1/w/360/h/240"></img> */}
                            </ListItem>
                        )
                    })
                }

                <LoadMore onClick={getMoreList()}>加载更多</LoadMore>

            </Fragment>
        )
    }
}
const mapStateToProps = (state) => {
    return {
        articleList: state.getIn(['homeReducer', 'articleList'])
    }
}

const mapDispatch = (dispatch) => (
    {
        getMoreList() {

            const action = actionCreator.getMoreListAction();
            console.log(action);
            dispatch(action);
        }
    }
)
export default connect(mapStateToProps, mapDispatch)(ArticleList);

---

原因分析：

未点击加载更多按钮就自动执行了该事件

<LoadMore onClick={getMoreList()}>加载更多</LoadMore>

:onClick事件如果包含 () ，就会变成执行函数，页面加载后会自动执行

---

解决方案：

提示：将代码纠正一下就可以了
此语法确保 getMoreList 内的 this 已被绑定。

<LoadMore onClick={() => { getMoreList() }}>加载更多</LoadMore>

或者

<LoadMore onClick={getMoreList.bind(this)}>加载更多</LoadMore>