javascript - 来自 action 和 reducer 的 Redux 状态未显示在 mapStateToProps 中

Question

我有一个名为 menu 的操作文件，它使用 axios 从后端 API 获取 JSON 数据。然后我有在获取数据的 MainMenu.js 文件中调用的减速器。所有数据都显示在 Redux 开发工具中。但是我只能访问我在 intitialState 中的数据。应该有一个包含三个项目的数组，但它只显示 intitialState 中的第一个。当我尝试 console.log 时，来自减速器的数据没有显示出来。所以很明显我无法将它呈现给 DOM。

动作/menu.js

import { ADD_PRODUCT, GET_PRODUCTS, GET_PRODUCT } from './types';
import axios from 'axios';

export const getProducts = () => (dispatch) => {
    axios
        .get('http://localhost:8080/menu')
        .then((response) => {
            // console.log(response);
            const data = response.data;
            dispatch({
                type: GET_PRODUCTS,
                payload: { data },
            });
        })
        .catch((err) => {
            console.log(err);
        });
};

export const getProduct = (product) => (dispatch) => {
    axios
        .get(`http://localhost:8080/menu/${product}`)
        .then((response) => {
            // console.log(response);
            const data = response.data;
            dispatch({
                type: GET_PRODUCT,
                payload: { data },
            });
        })
        .catch((err) => {
            console.log(err);
        });
};

减速器/index.js

import { combineReducers } from 'redux';
import menu from './menu';

export default combineReducers({ menu });

减速器/menu.js

import { GET_PRODUCTS, GET_PRODUCT } from '../actions/types';

const intitialState = [
    {
        test: 'Test',
    },
];

export default function (state = intitialState, action) {
    const { type, payload } = action;

    switch (type) {
        case GET_PRODUCTS:
            return [...state, payload];
        case GET_PRODUCT:
            return [...state, payload];
        default:
            return [...state];
    }
}

组件/MainMenu.js

import React, { Fragment, useEffect } from 'react';
import { connect } from 'react-redux';
import { getProducts, getProduct } from '../actions/menu';

const MainMenu = ({ getProducts, getProduct, menu }) => {
    useEffect(() => {
        getProducts();
        getProduct('b4bc2e28-21a3-47ea-ba3b-6bad40b35504');
        console.log(menu);
    }, []);
    return <Fragment></Fragment>;
};

const mapStateToProps = (state) => ({
    menu: state,
});

export default connect(mapStateToProps, { getProducts, getProduct })(MainMenu);

标签： javascriptreactjsreduxreact-reduxredux-thunk

Answer 1

我使用三元运算符创建了一个可行的解决方案。首先检查数组中的所有元素是否已加载。如果它们没有全部加载，则会显示一个数据未加载的 div。否则，数据将呈现给 DOM。

import React, { Fragment, useEffect } from 'react';
import { connect } from 'react-redux';
import { getProducts, getProduct } from '../actions/menu';

const MainMenu = ({ getProducts, getProduct, menu }) => {
    useEffect(() => {
        getProducts();
        getProduct('b4bc2e28-21a3-47ea-ba3b-6bad40b35504');
    }, []);
    if (menu.length <= 2) {
        console.log('Data Not Loaded');
    } else {
        console.log('Data', menu[2].data.name);
    }
    return (
        <Fragment>
            <div>{menu.length <= 2 ? <div>Data not loaded</div> : <div>{menu[2].data.name}</div>}</div>
            <div>
                {menu.length <= 2 ? (
                    <div>Data not loaded</div>
                ) : (
                    <div>
                        {menu[1].data.map((food) => (
                            <div>{food.name}</div>
                        ))}
                    </div>
                )}
            </div>
        </Fragment>
    );
};

const mapStateToProps = (state) => ({
    menu: state.menu,
});

export default connect(mapStateToProps, { getProducts, getProduct })(MainMenu);