.map Возвращает не функцию

Question

У меня есть приложение Mern, использующее Redux для управления состоянием.

По какой-то причине, когда я пытаюсь отобразить его, он говорит, что это не функция.

Это странно, потому что, когда я вижу свой реквизит через консоль, он показывает, что это массив, и реагирующий знает, что у меня есть данные в моем состоянии. И это также показывает данные в моих инструментах. Но когда я пытаюсь сделать это, я получаю эту ошибку. Также, когда я делаю this.props.products.products, он говорит мне, что не может прочитать свойство Null. Вот репозиторий github https://github.com/bryanb213/seller

Может кто-нибудь объяснить, почему

stuff.jsx

import React, { Component } from 'react'
import './stuff.stle.css'
import { getProducts } from '../redux/actions/productActions';
import { connect } from 'react-redux';



class Stuff extends Component {
    componentDidMount() {
        this.props.getProducts();
    }

    render() {
        console.log('Products from props', this.props)

        if (this.props.loading === true) {
            return (
                <div>Loading...</div >
            )
        } else {
            return(
                <div>
                    { this.props.products.map(p => (
                            <h1>{p.name}</h1>
                        ))
                    }
                </div>
            )
        }
    }
}


const mapStateToProps = state => ({
    //products from root reducer
    products: state.products,
})

export default connect(mapStateToProps, { getProducts })(Stuff);

Действие

// Get all products
export const getProducts = () => dispatch => {
    axios
        .get('http://localhost:5000/api/products/all')
        .then(res =>
            dispatch({
                type: GET_PRODUCTS,
                payload: res.data
            })
        )
        .catch(err =>
            dispatch({
                type: GET_PRODUCTS,
                payload: null
            })
        );
};

Редуктор

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

const initialState = {
    products: null,
    loading: true
}

export default function(state= initialState, action){
    switch(action.type){
        case GET_PRODUCTS:
            console.log('hitting GET_PRODUCTS', action.payload)
            return {
                ...state,
                products: action.payload,
                loading: false
            }
        default:
            return state
    }
}

Маршрут сервера

router.get('/all', (req, res) => {
    Product.find()
        .exec()
        .then(stuff => {
            res.status(200).json(stuff);
        })
        .catch(err => {
            console.log(err);
            res.status(500).json({
                error: err
            });
        });
});

почтальон

Answer 1

Значение

render() {
    console.log("Products from props", this.props);
    const { loading, products } = this.props;
    if (loading === true) {
      return <div>Loading...</div>;
    } else {
      return (
        <div>{products && products.products.map(p => <h1>{p.name}</h1>)}</div>
      );
    }
  }

this.props.products равно { products : [..] }, поэтому вам необходимо получить к нему доступ this.props.products.products, в таких случаях будет проще, если вы будете использовать синтаксис деструктурирующего присваивания для получения уважаемых значений, чтобы избежать путаницы.