Axios&Redux返回未定义，而不是解析

Question

我正在创建一个带有react&redux在我需要从api中获取一些数据的地方，我制作了操作/函数和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))
}
}

这里是μ减速器功能

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显示未定义的次数是显示数据的三倍。感谢您抽出时间<3

Answer 1

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

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

Answer 2

这是因为您的fetchCompanies是异步的，所以在提取数据时，一些内容会触发组件中的重新渲染。

您可以添加一个新状态并在加载数据和呈现加载消息时对其进行管理，也可以使用componentShouldUpdate检查您的道具并决定您的组件是否应该更新