Question

正如标题中所解释的，我收到错误期望onClick监听器是一个函数，而不是类型对象

但我无法理解为什么这不起作用。据我所知，onClick监听器是一个函数。

这里是错误来自

的CharacterList组件

import React,{Component} from 'react';
import {connect} from 'react-redux';
import {addCharacterById} from '../actions';
import {bindActionCreators} from 'redux';


class CharacterList extends Component{

    render(){
        //console.log('name : ',this.props.characters[2].name);
        return(
            <div>
            <h3>Characters</h3>
        <ul>
        {this.props.characters.map((character)=>{
            return(<li key={character.id}>{character.name}
                <div
                onClick={this.props.addCharacterById(character.id)}
                >+</div>
                </li>);
        })}
        </ul>
            </div>

            )
    }
}

function mapStateToProps(state){
    return {
        characters:state
    }
}




export default connect(mapStateToProps,{addCharacterById})(CharacterList);

这里是行动创造者

export const ADD_CHARACTER='ADD_CHARACTER';
export function addCharacterById(id){
    var action ={
        type:ADD_CHARACTER,
            id
        }
        return action;

}

那么，你们觉得怎么样？这有什么问题？

Answer 1

问题是你立即调用函数然后剩下的是返回值，这可能不是函数！

你可以做的是将函数调用包装在箭头函数中来解决你的问题。一旦你点击它就会调用内部函数：

import React,{Component} from 'react';
import {connect} from 'react-redux';
import {addCharacterById} from '../actions';
import {bindActionCreators} from 'redux';


class CharacterList extends Component{

    render(){
        //console.log('name : ',this.props.characters[2].name);
        return(
            <div>
            <h3>Characters</h3>
        <ul>
        {this.props.characters.map((character)=>{
            return(<li key={character.id}>{character.name}
                <div
                onClick={() => this.props.addCharacterById(character.id)}
                >+</div>
                </li>);
        })}
        </ul>
            </div>

            )
    }
}

function mapStateToProps(state){
    return {
        characters:state
    }
}




export default connect(mapStateToProps,{addCharacterById})(CharacterList);

执行此操作的方法不同，您可以将参数绑定到函数，例如：

{this.props.characters.map((character)=>{
    return(<li key={character.id}>{character.name}
        <div
        onClick={this.props.addCharacterById.bind(null, character.id)}
        >+</div>
        </li>);
})}

仅作为示例分享，以便您了解正在发生的事情以及为什么第一种方法更具可读性。您可以通过阅读文章https://ryanfunduk.com/articles/never-bind-in-render/

来了解为什么渲染中的.bind是一种不好的做法

Answer 2

ng build --prod代码的这一部分将在onClick={this.props.addCharacterById(character.id)}被调用后立即执行，而不是：

render()

请记住第一个传递给onClick={(e)=> {this.props.addCharacterById(e, character.id)}}的参数是click事件。

Answer 3

如果您想要有良好的实践，有些事情需要改变。

首先，添加mapDispatchToProps功能。

import { bindActionCreators } from 'redux';
...
function mapDispatchToProps(dispatch) {
  return {
    addCharacterById: bindActionCreators(addCharacterById, dispatch)
  };
}

其次，事件处理程序可以是：

onClick={() => this.props.addCharacterById(character.id)}

第三，导出你的组件：

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

Answer 4

不要在onClick事件中直接调用函数。它将递归调用该方法。因此，将onClick输入作为回调方法。

更改此行

onClick={this.props.addCharacterById(character.id)}

到

onClick={() => this.props.addCharacterById(character.id)}

期望onClick监听器成为一个函数，而不是类型对象 - react redux

4 个答案: