Javascript 未捕获的TypeError:\u 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}
            />
        )
    })
}

以下是盘点行动：

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);

从“React”导入React，{Component}
从“react router dom”导入{Link}
从“react redux”导入{connect}
从“axios”导入axios
/*组件和样式*/
从“../components/CardInventario”导入CardInventario
导入“../assets/styles/container/Stock.scss”
/*重演*/
将*作为inventoryActions从“../actions/inventoryActions”导入
类Stock扩展组件{
componentDidMount（）{
this.props.takeInventory（）；
}
printInventory=（）=>{
this.props.inventory.map（（inventory）=>{
返回(
)
})
}
render（）{
console.log（this.props.inventory）
返回(

Añadir项目A库存

{this.printInventory（）}
)
}
}
常量mapStateToProps=（减速器）=>{
返回减速机。库存减速机；
}
导出默认连接（MapStateTops，inventoryActions）（库存）；

首先，请使用正确的映射。 inventoryReducer不是您要映射的。 该对象中的库存是您想要的

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

此外，如果您在this.props.inventory中获得数据，则它应该与重复的密钥相关 请尝试以下方法

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

printInventory=（）=>{
this.props.inventory.map（（库存，索引）=>{
返回(
)
})
}

如果您没有id，可以改用索引（但不推荐）

printInventory=（）=>{
this.props.inventory.map（（inventory）=>{
返回(
)
})
}

错误？你看到了什么错误？你是说它还是空的？如果您的意思是空，那么我怀疑CardInventario自身的呈现部分未捕获类型错误：_this.props.inventory.map不是Stock.printInventory（Stock.jsx:19）at Stock.render（Stock.jsx:43）的函数。上述错误发生在ConnectFunction中的组件：in Stock（由ConnectFunction创建）（由Context.Consumer创建）我更新了答案。看起来你的映射函数是正确的。存在一个对象，而不是数组。因此，其中的库存应该是你想要填充的库存。请给我看看这个.props.inventory的输出。你在这里看到了吗？你尝试过我上面的解决方案吗？我更新了答案

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

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