獲取TypeError：_red2.props.handleClick不是一個函數，當將redux prop從容器傳遞到react中的表示組件時

Question

Redux的新手。 我正在嘗試將handleClick事件作為道具從容器組件傳遞到表示組件，handleClick事件應該調用通過mapDispatchToProps作為道具收到的動作。

有人可以告訴我如何正確執行此操作嗎？

我正在構建一個計算器，剛剛開始，到目前為止只有3個操作，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如圖所示這里 。 它看起來應該像這樣：

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