我正在使用Redux & React从API加载数据。尽管成功地提取了数据并将其应用于状态,但它仍抛出了一个错误:
未捕获的类型错误:无法读取未定义的属性“payload”。
这发生在控制台中的FETCH_PRODUCT_LISTINGS_PENDING
操作类型之后。
React组件:
import React from 'react';
import { connect } from 'react-redux';
import store from '../../../store';
import * as ProductListingActions from '../actions/ProductListingActions';
@connect((store) => {
return {
productListing: store.productListing.products
}
})
export default class ProductListingContainer extends React.Component {
constructor(data) {
super();
this.props = data;
this.props.dispatch(ProductListingActions.fetchProductListings());
}
render() {
return <div></div>;
}
}
减速器:
import CookieHandler from '../../../modules/CookieHandler';
const cookieHandler = new CookieHandler;
export default function reducer(
state = {
products: [],
fetching: false,
fetched: false,
error: null
}, action) {
switch(action.type) {
case "FETCH_PRODUCT_LISTINGS_PENDING":
return {
...state,
fetching: true,
}
break;
case "FETCH_PRODUCT_LISTINGS_REJECTED":
return {
...state,
fetching: false,
error: action.payload
}
break;
case "FETCH_PRODUCT_LISTINGS_FULFILLED":
return {
...state,
fetching: false,
fetched: true,
products: action.payload.data.default
}
break;
}
return state;
}
操作:
import Config from '../../../Config.js';
import store from '../../../store.js';
import axios from 'axios';
export function fetchProductListings() {
store.dispatch({
type: "FETCH_PRODUCT_LISTINGS",
payload: axios.get(Config.getConfigAPIUrl() + '/cartel/products')
})
}
任何帮助都将不胜感激
3条答案
按热度按时间8zzbczxx1#
您正在调度对dispatch的调用,而不是调度对象。
如果内联以下内容:
您的操作创建者不应该调用dispatch,它应该只返回一个操作:
但是请记住,
axios.get
是异步的,因此payload
将是承诺的,您可能需要考虑添加redux-thunk
来处理承诺的实现。kpbwa7wx2#
我最近使用
redux-toolkit
来获取API,遇到了同样的问题,当我检查api结果时,我看到我的有效负载值是undefined
,我通过简单地返回api数据的结果来解决这个问题。bksxznpy3#
除非你给予更多的信息,否则唯一会导致该信息的是
action.payload
没有被定义。也许它是action.payLoad
?仔细检查API返回的内容,以确保它确实是action.payload
。