期望onClick监听器是一个函数,而不是类型对象 - 反应redux

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>);
})}

仅作为示例共享,以便您了解正在发生的事情以及为什么第一种方法更具可读性.您可能希望通过阅读文章来了解为什么渲染中的.bind是一种不好的做法https://ryanfunduk.com/articles/never-bind-in-render/

Answer 2

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

改变这一行

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

到

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

Answer 3

onClick={this.props.addCharacterById(character.id)}这部分代码将在render()调用后立即执行，而您可能想做的是：

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

请记住，第一个传递给参数onClick的事件是click事件。