获取TypeError：_this2.props.handleClick在将redux prop从容器传递给presentational组件时不是函数

Question

对Redux来说很新。我正在尝试将handleClick事件作为从容器组件到表示组件的prop传递，handleClick事件应该调用已作为propDispatchToProps的prop获得的操作。

有人可以告诉我如何正确地做到这一点吗？

我正在构建一个计算器，刚刚启动，到目前为止只有三个动作，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 |           }

Answer 1

你在mapStateToProps中宣布mapDispatchToProps和ButtonsContainer。然后你将这两种方法传递给react-redux的connect，好像它们是在ButtonsContainer之外宣布的，因此它们是undefined。尝试将它们移出ButtonsContainer，如here所示。它应该看起来像这样：

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