Erwartet onClick-listener, um eine Funktion geben, stattdessen bekam der Typ object - reagieren redux

Wie schon im Titel, ich bin immer der Fehler
Erwartet onClick-listener, um eine Funktion geben, stattdessen bekam der Typ object

Aber ich bin nicht in der Lage zu verstehen, warum dies nicht funktioniert.
soweit ich weiß, wird die onClick-listener IST eine Funktion.

Hier, die CharacterList Komponente, wo der Fehler kommt,

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 die Aktion creator

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

}

So, was denken Sie?
was ist hier das problem?

"soweit ich weiß, wird die onClick-listener IST eine Funktion." Sind Sie sich da sicher? console.log ist eine Funktion. Ist console.log("Hello") eine Funktion?
wo siehst du die Konsole.log("Hallo")??
Es war eine Analogie. this.props.addCharacterById ist eine Funktion. Ist this.props.addCharacterById(character.id) eine Funktion?
Einen Aufruf der Funktion ist nicht eine Funktion. Ein Funktionsaufruf, der einen Wert zurückgibt. Du bist nicht die übergabe einer Funktion als onClick prop. Sie übergeben den Wert von der Funktion zurückgegeben wird.
hmm,ja. Lesen der anderen Antworten zu, die sagen das gleiche. Ich denke ich bekomme es jetzt.

InformationsquelleAutor faraz | 2017-06-29

  1. 19

    Das problem ist, dass dein Aufruf der Funktion sofort und was dann übrig bleibt, ist der Rückgabewert, die möglicherweise nicht eine Funktion!

    Was können Sie stattdessen tun ist wrap-Funktionsaufruf innerhalb einer Pfeil-Funktion, um Ihr problem zu lösen. Er rufe die innere Funktion, nachdem 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);

    Gibt es verschiedene Möglichkeiten, dies zu tun, können Sie zum Beispiel binden Sie den parameter an die Funktion, wie:

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

    Nur gemeinsam als ein Beispiel, so dass Sie verstehen, was Los ist und warum der erste Ansatz ist mehr lesbar. Können Sie wollen, zu schauen warum .binden render ist eine schlechte Praxis durch das Lesen der Artikel https://ryanfunduk.com/articles/never-bind-in-render/

    InformationsquelleAutor punkbit

  2. 4

    onClick={this.props.addCharacterById(character.id)} dieser Teil des Codes wird ausgeführt, unmittelbar nach render() rufen, was möchten Sie vielleicht stattdessen tun ist:

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

    Erinnere mich an den ersten parameter übergeben zu onClick ist das click-Ereignis.

    InformationsquelleAutor yahiramat

  3. 2

    Gibt es einige Dinge, die Sie brauchen, um zu ändern, wenn Sie wollen, um gute Praktiken.

    Erste, der hinzufügen mapDispatchToProps Funktion.

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

    Zweite, die event-handler werden könnte:

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

    Dritte, export-Komponente:

    export default connect(mapStateToProps, mapDispatchToProps)(CharacterList);
    können Sie uns erklären, warum Sie mit der bindActionCreators die Weise, die Sie haben, statt von unten: Funktion mapDispatchToProps(Absendung){ bindActionCreators({addCharacterById},Versand); } und was ist besser?
    Ich legte bindActionCreators Funktion in meiner Antwort, weil Sie es in Ihrem Beispiel aber eigentlich ist es nicht notwendig. Der einzige Anwendungsfall für bindActionCreators ist, wenn Sie übergeben möchten einige action-Macher nach unten auf eine Komponente, die nicht bewusst, Redux, und Sie nicht wollen, zu passieren, der Versand oder die Redux-Shop.

    InformationsquelleAutor slorenzo

Schreibe einen Kommentar