reactjs - Getting error =>TypeError: Cannot read property 'map' of undefined

Question

I am getting error: Cannot read property 'map' of undefined. Below is the code for ProductList.js in which I am using the map function.

import React, { Component } from 'react'
    import ProductAction from '../action/ProductAction';
    import Product from '../components/Product'
    import products from '../data/ProductData'
    
    export default class ProductList extends Component {
        deleteProduct(id) {
            console.log('Delete Product from ProductList for id..' + id);
            ProductAction.deleteProduct(id);
        }
        render() {
            var productNodes = this.props.products.map(product => {
                return (
                    <Product key={product.id} id={product.id} name={product.name} quantity={product.quantity}
                        onDelete={this.deleteProduct}> {product.price}
                    </Product>
                );
            });
            return (
                <div>
                    <table border="1">
                        <thead>
                            <tr>
                                <th>Name</th>
                                <th>Quantity</th>
                                <th>Price</th>
                            </tr>
                        </thead>
                        <tbody>
                            {productNodes}
                        </tbody>
                    </table>
                </div>
            );
        }
    }

And this is the code for ProductApi.js:

import ProductData from './ProductData';
import _ from 'lodash';
import axios from 'axios';

const _clone = function(item){
    return JSON.parse(JSON.stringify(item));
};

export default class ProductApi {
    static getAllProducts(){
        axios.get('http://localhost:3000/products')
         .then(response => console.log(response.data))
         .catch(error => {throw error})
         }
       static saveProduct(product){
        console.log(product)
        axios.post('http://localhost:3000/products',product)
        .then(response=> console.log(response.data))
        .catch((error) => {throw error})
}
static displayProduct(product){
    return _clone(product);
}
}

Please check the code and let me know what am I doing wrong.

Thanks, Divya

Answer 1

等待大神答复