Question

我搜索了这个答案，但没有看到任何与我的问题相符的答案。我正在尝试使用React＆amp; amp; Redux和每当我点击其中一个数字按钮时，我收到一条错误，上面写着“this.props.AppendCharacter不是函数”

以下是我的相关代码：

number_button.js

import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';

import AnswerScreen from '../containers/answer_screen';
import AppendCharacter from '../actions/index';

class NumberButton extends Component {
    constructor(props) {
        super(props);

        this.state = { button: '' };
        this.clickButton = this.clickButton.bind(this);
    };

    clickButton() {
        this.props.AppendCharacter(this.props.number);
        console.log('clicked on ', this.props.number);
        this.setState({ button: this.props.number });
    }

    render(props) {
        return (
            <div className="number-button general-button" onClick={this.clickButton}>
            {this.props.number}
            </div>
        );
    };
};

function mapDispatchToProps(dispatch) {
    return bindActionCreators({ AppendCharacter }, dispatch);
};

export default connect(null, mapDispatchToProps)(NumberButton);

动作/ index.js

export function AppendCharacter(character) {
    return {
        type: APPEND,
        payload: character
    };
};

Answer 1

您可以将mapDispatchToProps更改为：

，从而完成所需工作

function mapDispatchToProps(dispatch) {
    return {
        AppendCharacter: (character) => dispatch(AppendCharacter(character));
    };
}

我不熟悉bindActionCreators，所以如果您需要该功能，其他人可能需要权衡。

附注：在您当前的设置中，您似乎不需要button的组件状态。您可能有计划，但在您的示例中它未被使用。

Answer 2

const mapDispatchToProps = {
  AnswerScreen,
  AppendCharacter 
};

export default connect(null, mapDispatchToProps)(NumberButton);

Answer 3

好吧，我发现了错误。在不同的网站上有人帮助了我。 bindActionCreators工作正常，但问题是当我从../actions/index导入AppendCharacter时，我需要将大括号中的AppendCharacter包装起来。我改变了，现在应用程序正常工作。

呼！

感谢大家的回复。在过去的几天里，我学到了很多东西！

React-Redux：this.props.AppendCharacter不是函数

3 个答案: