React onClick执行元素中的所有onClick

Question

我的组件中有以下代码：

<ul className="nav navbar-nav">
    <li className="active" onClick={this.props.resetInfoAndError(1)}><Link to="/owner.html">Main<span className="sr-only">(current)</span></Link></li>
    <li onClick={this.props.resetInfoAndError(2)}><Link to="/carwash">Second</Link></li>
</ul>

this.props.resetInfoAndError(element)是通过redux容器（mapDispatchToProps）传递给组件的函数

const mapDispatchToProps = (dispatch) => {
return {
    saveInfo: (info) => {
        dispatch(changeInfo(info))
    },

    resetInfoAndError: (a) => {
        dispatch(changeInfo(a))
    }
}
}

我安装了redux logger并按下一个li标签并在控制台中查看为什么函数在两个标签中调用（带有1和2个参数）：

为什么会发生以及如何解决？

Answer 1

在渲染过程中不要调用onclick。使用如下的包装函数。

<ul className="nav navbar-nav">
    <li className="active" onClick={() => this.props.resetInfoAndError(1)}><Link to="/owner.html">Main<span className="sr-only">(current)</span></Link></li>
    <li onClick={() => this.props.resetInfoAndError(2)}><Link to="/carwash">Second</Link></li>
</ul>