Блог

Я не знаю, что происходит с компонентом, я пытаюсь отобразить массив объектов из 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;
  

и вот действия инвентаризации:

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

  

Прежде всего, пожалуйста, используйте правильное отображение. 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((inventory) => {
        return (
            <CardInventario
                key={inventory.id}
                cardTitle={inventory.name}
                quantity={inventory.quantity}
                description={inventory.price}
            />
        )
    })
}