Redux 无法读取未定义的属性“有效负载”答案

【问题标题】：Redux Cannot read property 'payload' of undefinedRedux 无法读取未定义的属性“有效负载”
【发布时间】：2023-04-08 21:24:02
【问题描述】：

我正在使用 Redux 和 React 从 API 加载数据。尽管成功地提取数据并将其应用于状态，但它会引发错误：

未捕获的类型错误：无法读取未定义的属性“有效负载”。

这发生在控制台中的 FETCH_PRODUCT_LISTINGS_PENDING 操作类型之后。

反应组件：

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')
    })

}

任何帮助将不胜感激

【问题讨论】：

标签： javascript reactjs redux

【解决方案1】：

您正在调度一个对 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 来处理承诺的履行。

【讨论】：

注意 - 我已经在使用 redux-thunk，但感谢您的提示 :)

【解决方案2】：

除非您提供更多信息，否则唯一会导致该信息的是 action.payload 未定义。也许是action.payLoad？仔细检查 API 返回的内容，确保它确实是 action.payload。

【讨论】：