Axios 和 Redux returns 未定义，然后解析

Question

我正在创建一个带有 React 和 redux 的系统，我需要从 api 中获取一些数据，我制作了 action/function 和 reducer 但是当我尝试访问我的结果时组件和控制台记录它们，它显示未定义的次数是解析的三倍，当我尝试映射结果时，当然我不能因为未定义的东西。[在此处输入图像描述][1]

这是我的动作函数代码。

import axios from "axios";
import Cookies from "js-cookie";

export const signIn = () => {
    return {
        type: 'LOGGED'
    };
};

export const getCompaniesAction =  (data)  => {
    return{
        type: "GET_COMPANIES",
        payload: data
    };
};

export function fetchCompanies(){
    return(dispatch) => {
        return axios.get(`http://ticketing.mydev.loc/api/companies`, {headers:{
         Authorization: `Bearer ${Cookies.get('access_token')}`
        }}).then(res => res.data.data).then(data => dispatch(getCompaniesAction(data))).catch(err => console.log(err))
    }
}

这里是 mu reducer 函数

const companiesReducer = (state = [], action) => {
    switch (action.type) {
        case 'GET_COMPANIES':
            return{
                ...state,
                companies: action.payload
            }
        default:
            return{
                ...state
            }
    }
}
export default companiesReducer;

这是商店

const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
const store = createStore(
    allReducers,  compose(applyMiddleware(thunk), composeEnhancer)
)

将状态映射到道具

const mapStateToProps = (state) => ({
    companies: state.companiesReducer.companies
})
export default connect(mapStateToProps, actionCreators)(Company);

组件挂载

  componentDidMount() {
        this.props.fetchCompanies()
    }

我在这里尝试访问数据

   render(){
       if(this.props.companies !== 'undefined'){
           console.log(this.props.companies)
       }

所以我的 redux devtool 完美地显示了状态变化，但是这个 console.log 在组件中显示 undefined 是显示数据的三倍。感谢您抽出时间<3

Answer 1

未定义是 companies 的未初始化状态的结果。另外 "undefined" 是一个字符串，而不是值 undefined。试试这样检查

render(){
       if(this.props.companies !== undefined){
           console.log(this.props.companies)
       }

Answer 2

那是因为您的 fetchCompanies 是异步的，因此在获取数据时，某些内容会在您的组件中触发重新渲染。

您可以在加载数据和呈现加载消息时添加新状态并管理它，或者您可以使用 componentShouldUpdate 检查您的道具并决定您的组件是否应该更新

Axios 和 Redux returns 未定义，然后解析

Axios & Redux returns undefined, than resolves

reactjs

redux

redux-thunk

react-redux

axios