wake-up-neo.com

Es wurde erwartet, dass der onClick-Listener eine Funktion ist, und erhielt stattdessen den Typ object -react redux

Wie im Titel erläutert, erhalte ich die Fehlermeldung Der onClick-Listener wurde als Funktion bezeichnet und erhielt stattdessen das Objekt type 

Aber ich kann nicht verstehen, warum das nicht funktioniert. Soweit ich weiß, ist der onClick-Listener IS eine Funktion.

Hier ist die CharacterList-Komponente, von der der Fehler stammt

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

Und hier ist der Action-Schöpfer

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

}

Also, was denkst du? Was ist hier das Problem?

6
faraz

Das Problem ist, dass Sie die Funktion sofort aufrufen und dann der Rückgabewert bleibt, der möglicherweise keine Funktion ist! 

Stattdessen können Sie den Funktionsaufruf in eine Pfeilfunktion umschließen, um Ihr Problem zu lösen. Es wird die innere Funktion aufgerufen, sobald Sie onClick:

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

Es gibt verschiedene Möglichkeiten, dies zu tun. Sie können beispielsweise den Parameter an die Funktion binden, z.

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

Nur als Beispiel, damit Sie wissen, was los ist und warum der erste Ansatz lesbarer ist. Vielleicht möchten Sie herausfinden, warum .bind im Rendering eine schlechte Praxis ist, indem Sie den Artikel https://ryanfunduk.com/articles/never-bind-in-render/ lesen.

15
punkbit

onClick={this.props.addCharacterById(character.id)} Dieser Teil Ihres Codes wird sofort ausgeführt, wenn render() aufgerufen wird. Vielleicht möchten Sie stattdessen Folgendes tun:

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

Denken Sie daran, dass die erste Parameterübergabe an onClick das Klickereignis ist.

6
yahiramat

Es gibt einige Dinge, die Sie ändern müssen, wenn Sie bewährte Verfahren anwenden möchten.

Fügen Sie zuerst die mapDispatchToProps-Funktion hinzu.

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

Zweitens könnte der Event-Handler sein:

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

Drittens exportieren Sie Ihre Komponente:

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