问题:为什么使用redux时action里面的参数返回为undefined?

目前,我有一个呈现日期列表的页面,当用户按下某个日期时,用户将被带到一个新页面,该页面呈现他们按下的日期的图表。

我想使用 redux 来更新 props,这样我就可以根据用户按下的按钮来渲染特定的图形。

在我的 renderList() 中,我返回一个映射数组,该数组又返回一堆 TouchableOpacities。在每个 TouchableOpacity 中,在 onPress 事件中,调用另一个函数,将有关测试的所有信息作为参数传递。 renderList 看起来像这样。

let sorted = _.orderBy(this.props.testResults, testResult => testResult.created, 'desc');
        moment.locale(localeToMomentLocale(I18n.locale));
        return sorted.map((result, index) => {
            let formattedDate = moment(result.created).format(I18n.t('report_header_dformat'));
            let correctedDate = vsprintf(I18n.t('report_date_correction'), [formattedDate]);
            let analysis = TestAnalysis.run(result);
            return (
                <TouchableOpacity
                    onPress={() => this.resultOrTest(result)}
                    style={styles.row} key={'_' + index}>
               </TouchableOpacity>

resultOrTest 看起来像这样:

resultOrTest = (result) => {
        console.log('ReportDetailPage: resultOrTest: showing result: ', result.id);

        this.props.setResultIdToProps(result.id);
        this.props.navigation.navigate('ReportSinglePage');
    };

mapDispatchToProps 看起来像这样:

const mapDispatchToProps = (dispatch) => {
    return {
        setResultIdToProps: () => {
            dispatch(setResultIdToProps());
        }
    }
}

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

在我的操作/user.js 页面中。

export const setResultIdToProps = (resultId) => {
    // var newId = resultId.toString();
    console.log('actions/user.js setResultIdToProps: resultid.......', resultId);
    return (dispatch, getState) => {
        dispatch({
            type: SET_RESULT_ID_TO_PROPS,
            resultId
        });
    }
};

为什么 resultId 总是以未定义的形式返回?我是否传递了错误的值/参数?

解答

您需要将参数正确传递给mapDispatchToProps中的动作调度程序。现在,您没有传递resultId,因此它作为undefined传递。

const mapDispatchToProps = (dispatch) => {
    return {
        setResultIdToProps: (resultId) => {
            dispatch(setResultIdToProps(resultId));
        }
    }
}
Logo

React社区为您提供最前沿的新闻资讯和知识内容

更多推荐