on클릭청취자가 함수가 되어야 하는데 대신 유형 개체 - react redux를 얻습니다.

on클릭청취자가 함수가 되어야 하는데 대신 유형 개체 - react redux를 얻습니다.

제목에서 설명한 것처럼 Expected onClick listener be function, 대신 type object가 표시됨

하지만 왜 이것이 작동하지 않는지 이해할 수 없습니다.제가 알기로는 onClick listener는 함수입니다.

다음은 오류가 발생한 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;

}

그래서, 당신들 생각은 어때?여기 문제가 뭐야?

문제는 함수를 즉시 호출하고 남은 값은 함수가 아닐 수 있는 반환 값입니다.

대신 해당 함수 호출을 화살표 함수로 감싸서 문제를 해결할 수 있습니다.를 클릭하면 내부 함수가 호출됩니다.클릭:

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/

onClick={this.props.addCharacterById(character.id)}코드의 이 부분은 즉시 실행됩니다.render()대신 하고 싶은 일은 다음과 같습니다.

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

첫 번째 매개 변수 전달을 기억하십시오.onClick클릭 이벤트입니다.

에서 함수를 직접 호출하지 않음onClick이벤트. 메서드를 재귀적으로 호출합니다.그럼 이제...onClick콜백 방식으로서 입력합니다.

이 행을 변경하다

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

로.

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

좋은 실천을 하고 싶다면 바꿔야 할 것들이 있다.

먼저 추가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);

추가 답변입니다. 모든 onClick on your code(코드 클릭)의 형식이 이와 같은지 확인하십시오.

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

onClick의 형식이 onClick={this.props.addCharacterById(character.id)}인 경우에도 문제가 발생할 수 있습니다.

언급URL : https://stackoverflow.com/questions/44833583/expected-onclick-listener-to-be-a-function-instead-got-type-object-react-redu