首页 文章

React Redux动作不进入派遣

提问于
浏览
2

我已经看到了一些类似的问题,但是我不完全确定我是否理解mapDispatchToProps,bindActionCreators和connect如何工作,所以我不确定我哪里出错了 .

目前,我正在调用我的recordFullTimeScoreAnswer函数,但是当它进入函数时,返回行后没有任何反应 . 未打印console.log且没有任何错误

零件

renderNextQuestionArrow(question: Question) {
        const p = this.props;
        const s = this.state;

        return (
            <div onClick={ () => { p.recordFullTimeScoreAnswer(s.homeScore, s.awayScore, p.question, p.questionIndex, p.user, p.configs) } }>
                <Arrow direction="right" action={ () => { p.showNextQuestion() } }/>
            </div>
        )
    }

容器

import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { recordFullTimeScoreAnswer, showNextQuestion } from '../actions';

render() {
    return(
        <FullTimeScoreActive
                imgSrc={imgSrc}
                user={user}
                answerStatus={answerStatus}
                question={question}
                showNextQuestion={showNextQuestion}
                recordFullTimeScoreAnswer={recordFullTimeScoreAnswer}
                questionIndex={questionIndex}
                total={total}
                configs={configs}
            />
    )
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators({ recordFullTimeScoreAnswer, showNextQuestion }, dispatch);
};

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

export { FullTimeScoreContainer }

行动

export function recordFullTimeScoreAnswer(
    homeScore: number,
    awayScore: number,
    question: Object,
    questionIndex: number,
    user: User,
    configs: Configs
) {
    console.log("outside record answer");
    return (dispatch: Function) => {
        console.log("inside record answer");

        let uri = configs.baseAPIPath + '/questions/';

        if ( user.loggedIn ) {
            fetchWithAuth(uri, 'POST', answer, user.tokens, configs.clientId, dispatch, false, v.questionId).then( (data) => {
                if (data) {
                    dispatch({
                        type: RECORD_ANSWER_SUCCESS,
                        payload: { questionIndex, answerId }
                    })
                }
            });
        }
    }
}

我看到的最后一件事是“外部记录答案”日志,但从来没有“内部记录答案”日志

1 回答

  • 2

    问题在于这一行:

    recordFullTimeScoreAnswer = { recordFullTimeScoreAnswer }
    

    在这里你直接传递动作文件中定义的动作,而不是通过 mapDispatchToProps 方法传递给props中的组件的动作,在你的情况下你总是调用外部方法,内部方法永远不会被调用,也 recordFullTimeScoreAnswer 将不会得到访问 dispatch .

    用这个:

    recordFullTimeScoreAnswer={this.props.recordFullTimeScoreAnswer}
    

    Note:

    你写的方式将打印内部控制台,如果你这样写:

    recordFullTimeScoreAnswer = {recordFullTimeScoreAnswer()}      // notice `()`
    

    但它也会抛出错误 .

相关问题