Question

我无法发送.. 低于错误“AnswerButton.jsx：14 Uncaught TypeError：this.props.changeAnswer不是函数”

import * as React from "react";
import {connect} from 'react-redux';
import {isUndefined} from 'lodash';
import {changeAnswer} from '../../../actions/LoadRiskActionCreators';

require('./style.scss');

export class AnswerButton extends React.Component {
    constructor(props) {
        super(props);
        this.updateAnswer = this.updateAnswer.bind(this);
    }
    updateAnswer(answer){
       this.props.changeAnswer(this.props.questionId ,answer);
    }
    render() {
        const {answer, questionId} = this.props;
        return <div className="toggle-switch">
            <span className={`switch${!isUndefined(answer) ? (answer ? ' active' : ' inactive') : ""}`}
                  onClick={() => this.updateAnswer(true)}>Yes</span>
            <span className={`switch${!isUndefined(answer) ? (answer ? ' inactive' : ' active') : ""}`}
                  onClick={() => this.updateAnswer(false)}>No</span>
        </div>
    }
}

export const mapDispatchToProps = (dispatch) => ({
    changeAnswer: (id, answer) => dispatch(changeAnswer(id, answer)),
});

export default connect(mapDispatchToProps)(AnswerButton);

Answer 1

您必须创建mapStateToProps函数并将其放在mapDispatchToProps之前：

export const mapStateToProps = () => ({});

export const mapDispatchToProps = (dispatch) => ({
    changeAnswer: (id, answer) => dispatch(changeAnswer(id, answer)),
});

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

Answer 2

connect的第一个参数是mapStateToProps函数。如果您不需要它，则必须将null作为第一个参数传递：

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

由于您对道具的行动名称和行动创建者的名称相同并接受相同的参数，因此您可以使用mapDispatchToProps的简写版本：

export default connect(null, { changeAnswer })(AnswerButton);

我无法在redux中mapDispatchToProps

2 个答案: