Получение TypeError: _this2.props.handleClick не является функцией при передаче избыточной информации из контейнера в презентационный компонент в реакции. - PullRequest
Новая
       12

Получение TypeError: _this2.props.handleClick не является функцией при передаче избыточной информации из контейнера в презентационный компонент в реакции.

0 голосов
/ 03 сентября 2018

Довольно плохо знаком с Redux. Я пытаюсь передать событие handleClick как реквизит из компонента контейнера в презентационный компонент, событие handleClick должно вызывать действие, которое было получено как реквизит с mapDispatchToProps.

Может кто-нибудь сказать мне, как это сделать правильно, пожалуйста?

Я строю калькулятор, только что начал, у него пока только три действия, add, Record_input_1 и Record_Input_2.

контейнеры / ButtonsContainer.js: 

import React, { Component } from 'react';
import { Buttons } from '../components/Buttons'
import { Record_Input_1 } from '../actions/sum-action';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';


class ButtonsContainer extends Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
    }

    handleClick(num) {
        return this.props.onRecordInput1(num)
    }

    render() {
        return(
            <Buttons handleClick={this.handleClick} />
     )
    }

    mapStateToProps = (state) => {
        return {
            inputValue1: state.inputValue1,
            inputValue2: state.inputValue2,
            answer: state.answer
        }
    }

    mapDispatchToProps = (dispatch) => {
        return bindActionCreators({
            onRecordInput1: Record_Input_1,
            onRecordInput2: Record_Input_2
        }, dispatch);
    }
}

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

компоненты / Buttons.js 

import React, { Component } from 'react';



class Buttons extends Component {


    render() {
        const buttonMaker = (buttons, row) => {
            for (let value of buttons) {
                row.push(<button onClick={() => this.props.handleClick(value)} key={value}>
                {value}
                </button> )
              }
        }

        let row1 = [];
        let buttons1 = [1,2,3]
        buttonMaker(buttons1, row1)


        let row2 = [];
        let buttons2 = [4,5,6]
        buttonMaker(buttons2, row2)


        let row3 = [];
        let buttons3 = [7,8,9]
        buttonMaker(buttons3, row3)

        return (
            <div>
          <div>{row1}</div>
          <br />
          <div>{row2}</div>
          <br />
          <div>{row3}</div>

        </div>
        )
    }  
}



export default Buttons;

actions/sum-actions/js:

export const ADD = 'ADD';
export const RECORD_INPUT_1 = 'RECORD_INPUT_1';
export const RECORD_INPUT_2 = 'RECORD_INPUT_2';

export const add = (newInput1, newInput2) => {
    return {
        type: ADD,
        newAnswer: newInput1 + newInput2
    }
}

export const Record_Input_1 = (newInput1) => {
    return {
        type: RECORD_INPUT_1,
        newInput1
    }
}

export const Record_Input_2 = (newInput2) => {
    return {
        type: RECORD_INPUT_2,
        newInput2
    }
}

reducders / сумма-reducer.js: 

import { ADD, RECORD_INPUT_1, RECORD_INPUT_2 } from '../actions/sum-action'

export const initialState = {
    inputValue1: '',
    inputValue2: '',
    answer: 0
}

export const sumReducer = (state = initialState, action) => {
    switch (action.type) {
        case ADD:
        return [
            ...state,
            {
                answer: action.newAnswer
            }
        ]
        case RECORD_INPUT_1:
        return [
            ...state, 
            {
                inputValue1: action.newInput1
            }
        ]
        case RECORD_INPUT_2:
        return [
            ...state, 
            {
                inputValue2: action.newInput2
            }
        ]
        default:
        return state;
    }
}

store.js: 

import { combineReducers, createStore } from 'redux';
import { initialState, sumReducer } from './reducers/sum-reducer';


const rootReducers = combineReducers({
    sumReducer
})

export default createStore(rootReducers, initialState, window.devToolsExtension && window.devToolsExtension());

Кнопки отображаются нормально, когда я нажимаю на одну, я получаю эту ошибку: TypeError: _this2.props.handleClick не является функцией для: 

  8 | render() {
   9 |     const buttonMaker = (buttons, row) => {
  10 |         for (let value of buttons) {
> 11 |             row.push(<button onClick={() => this.props.handleClick(value)} key={value}
  12 |             {value}
  13 |             </button> )
  14 |           }

1 Ответ

0 голосов
/ 03 сентября 2018

Вы объявляете mapStateToProps и mapDispatchToProps в пределах ButtonsContainer. Затем вы передаете эти два метода для реакции-редукса connect, как если бы они были объявлены вне ButtonsContainer, следовательно, они undefined. Попробуйте переместить их из ButtonsContainer, как показано здесь . Это должно выглядеть примерно так: 

class ButtonsContainer extends Component {
    ...
}

const mapStateToProps = (state) => {
    return {
        inputValue1: state.inputValue1,
        inputValue2: state.inputValue2,
        answer: state.answer
    }
}

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        onRecordInput1: Record_Input_1,
        onRecordInput2: Record_Input_2
    }, dispatch);
 }

export default connect(mapStateToProps, mapDispatchToProps)(ButtonsContainer);
...