Redux无法读取未定义的属性“payload”

dvtswwa3  于 2022-12-19  发布在  其他
关注(0)|答案(3)|浏览(159)

我正在使用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')
    })

}

任何帮助都将不胜感激

8zzbczxx

8zzbczxx1#

您正在调度对dispatch的调用,而不是调度对象。

this.props.dispatch(ProductListingActions.fetchProductListings());

function fetchProductListings() {
  store.dispatch({
    type: "FETCH_PRODUCT_LISTINGS",
    payload: axios.get(Config.getConfigAPIUrl() + '/cartel/products')
  })
}

如果内联以下内容:

this.props.dispatch(
  store.dispatch({
    type: "FETCH_PRODUCT_LISTINGS",
    payload: axios.get(Config.getConfigAPIUrl() + '/cartel/products')
  })
)

您的操作创建者不应该调用dispatch,它应该只返回一个操作:

export function fetchProductListings() {
  return {
    type: "FETCH_PRODUCT_LISTINGS",
    payload: axios.get(Config.getConfigAPIUrl() + '/cartel/products')
  }
}

但是请记住,axios.get是异步的,因此payload将是承诺的,您可能需要考虑添加redux-thunk来处理承诺的实现。

kpbwa7wx

kpbwa7wx2#

我最近使用redux-toolkit来获取API,遇到了同样的问题,当我检查api结果时,我看到我的有效负载值是undefined,我通过简单地返回api数据的结果来解决这个问题。

export const getPosts = createAsyncThunk("posts/getPosts", async ()=> {
  const res = await axios.get(`${baseURL}/posts/1`)
  return res.data;
});
bksxznpy

bksxznpy3#

除非你给予更多的信息,否则唯一会导致该信息的是action.payload没有被定义。也许它是action.payLoad?仔细检查API返回的内容,以确保它确实是action.payload

相关问题