首页 > 解决方案 > 依赖注入调用导出默认失败

问题描述

大家晚安,我想做的是通过在 loadUA 函数中绑定来注入 axios,但是当在组件中默认导入时,我得到了这个错误。原因是我想消除方法中的轴依赖,以便我可以更轻松地执行测试,没有加载中的绑定一切正常,但我无法通过绑定注入轴并在组件中使用该方法。

组件

import React from 'react';
import { connect } from 'react-redux';
import loadUA from './actions'

class UserAgent extends React.Component {

    componentDidMount(){
        this.props.loadUA()
    }
    render(){
        if(this.props.isFetching){
            return <span> Loading ...</span>
        }
        if(this.props.error){
            return <span>Error</span>
        }
        return (
            <span>{this.props.data['user-agent']}</span>
        )
    }
}
const mapStateToProps = (state) => {
    return {
        isFetching: state.UA.isFetching,
        data: state.UA.data,
        error: state.UA.error
    }
}
const mapDispatchToProps = (dispatch) =>{
    return {
        loadUA: () => dispatch(loadUA())
    }
}
export default connect( mapStateToProps, mapDispatchToProps )(UserAgent)

行动

import axios from 'axios'
export const loadUARequest = () => {
    return {
        type: 'LOAD_UA_REQUEST'
    }
}
export const loadUASuccess = (data) => {
    return{
        type: 'LOAD_UA_SUCCESS',
        data
    }
}
export const loadUAError =() =>{
    return{
        type: 'LOAD_UA_ERROR'
    }
}
export const loadUA = (axios) => {
    return dispatch => {
        dispatch(loadUARequest())
        axios
            .get('https://httpbin.org/user-agent')
            .then(({data}) => dispatch(loadUASuccess(data)))
            .catch(() => dispatch(loadUAError()))
    }
}
export default {
    loadUA: loadUA.bind(null, axios)
}

错误

在此处输入图像描述

标签: reactjsreduxreact-reduxredux-thunk

解决方案


推荐阅读