Lists & Keys in ReactJS: TypeError: Cannot read property 'map' of undefined

Question

我正在将一些 HTML 转换为 ReactJS，我正在尝试使用转换列表功能。我的意思是：https://reactjs.org/docs/lists-and-keys.html

非常感谢您的帮助。

我收到的错误是：类型错误：无法读取未定义的属性 'map' 编译器将此行指向问题所在：

const menuPizzaList = props.pizzaItems.map((item) =>

文件中的所有代码如下：


    import React from 'react';

    function PizzaList(props) {

        const menuPizzaList = props.pizzaItems.map((item) =>

            <div key={item.id}>
                <br />
                <h1><b>{item.title}</b><span className="w3-tag w3-red w3-round">{item.special}</span>
                    <span className="w3-right w3-tag w3-dark-grey w3-round">{item.price}</span></h1>
                <p className="w3-text-grey">{item.about}</p>
            </div>
        );

        return (
            <div>
                {menuPizzaList}
            </div>
        )

    }

    export default PizzaList;

正在从数组中检索数据：


    //JSON object with menu items for pizza 
    const pizzaItems = [
        {id:1, title:'Margherita', price:'.50', about: 'Fresh tomatoes, fresh mozzarella, fresh basil'},
        {id:2, title:'Formaggio', price:'.50', about: 'Four cheeses (mozzarella, parmesan, pecorino, jarlsberg)'},
        {id:3, title:'Chicken', price:'.00', about: 'Fresh tomatoes, mozzarella, chicken, onions'},
        {id:4, title:'Pineapple"o"clock', price:'.50', about: 'Fresh tomatoes, mozzarella, fresh pineapple, bacon, fresh basil'},
        {id:5, title:'Meat Town', special: 'Hot!', price:'.00', about: 'Fresh tomatoes, mozzarella, hot pepporoni, hot sausage, beef, chicken'},
        {id:6, title:'Parma', special: 'NEW', price:'.00', about: 'Fresh tomatoes, mozzarella, parma, bacon, fresh arugula'}

    ];

之后的数据传入这个


    <PizzaList items={pizzaItems}></PizzaList>

Answer 1

改变 <PizzaList items={pizzaItems}></PizzaList> 到 <PizzaList pizzaItems={pizzaItems}></PizzaList>

Lists & Keys in ReactJS: TypeError: Cannot read property 'map' of undefined

Lists & Keys in ReactJS: TypeError: Cannot read property 'map' of undefined

javascript

arrays

function

reactjs

react-component