포착되지 않은 TypeError : _this.props.data.map은 함수가 아닙니다. 구성 요소를 렌더링하기위한 매핑 오류입니다.

여기서 mongo에서 객체 배열을 매핑하려는 구성 요소에서 어떤 일이 발생하는지 모르겠지만 printInventory에 아무것도 표시하지 않지만 this.props.inventory를 호출하면 모든 데이터가 필요합니다! 무슨 일이야?

 printInventory = () => {
    this.props.inventory.map((inventory) => {
        return (
            <CardInventario
                cardTitle={inventory.name}
                quantity={inventory.quantity}
                description={inventory.price}
            />
        )
    })
}

이 기능에서.

다음으로 액션과 리듀서를 보여 드리겠습니다.

inventoryReducer :

import {TAKE_INVENTORY} from '../../types/inventoryTypes';

const INITIAL_STATE ={
    inventory: []
}

function invetoryReducer(state = INITIAL_STATE,action){
    switch (action.type) {
        case TAKE_INVENTORY:
            return {...state, inventory: action.payload}
            break;
        default:
            return state;
            break;
    }
}

export default invetoryReducer;

그리고 여기에 inventoryActions :

import axios from 'axios'
import { TAKE_INVENTORY } from '../../types/inventoryTypes'

export const takeInventory = () => async (dispatch) =>{
    const res = await axios.get('http://localhost:3001/inventory')
        dispatch({
            type: TAKE_INVENTORY,
            payload: res.data
        })
    
}

그리고 전체 구성 요소 :

import React, { Component } from 'react'
import { Link } from 'react-router-dom'
import { connect } from 'react-redux'
import axios from 'axios'
/* Components and Styles */
import CardInventario from '../components/CardInventario'
import '../assets/styles/container/Stock.scss'
/* Redux */
import * as inventoryActions from '../actions/inventoryActions'

class Stock extends Component {

    componentDidMount() {
        this.props.takeInventory();
    }

    printInventory = () => {
        this.props.inventory.map((inventory) => {
            return (
                <CardInventario
                    cardTitle={inventory.name}
                    quantity={inventory.quantity}
                    description={inventory.price}
                />
            )
        })
    }

    render() {
        console.log(this.props.inventory)
        return (
            <>
                <div className="container">
                    <div className="additem">
                        <Link to="/additem" className="additem__link">
                            <p className="link-add">
                                Añadir Item a Stock
                            </p>
                        </Link>
                    </div>
                    <div className="stock" key="stock">
                        {this.printInventory()}
                    </div>
                </div>
            </>
        )
    }
}

const mapStateToProps = (reducers) => {
    return reducers.inventoryReducer;
}

export default connect(mapStateToProps, inventoryActions)(Stock);