在 React 中渲染对象数组中的元素

Question

我正在尝试使用 React 渲染数组内的对象。我想要实现的是创建一个菜单，它将嵌套对象作为输入并 return 对象。但是，第 62 行的 return 函数并未 returning const renderedItems

const renderedItems

应该渲染所有内容。请让我知道我什么时候去上班。任何帮助将不胜感激。

<div id='root' class='container'></div>


<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>



<script type="text/babel">
    const starter = [{
            "Item": "Warm spiced olives & prosciutto ",
            "Price": "6",
            "DescriptionPrimary": "Description One",
            "DescriptionSecondary": "Description Two"
        },
        {
            "Item": "Crusty sourdough bread (2pc)",
            "Price": "9",
            "DescriptionPrimary": "with a choice of garlic butter or olive oil and balsamic vinegar",
            "DescriptionSecondary": "Description Two"
        },
        {
            "Item": "Tasmanian oysters 6 or 12",
            "Price": "12",
            "DescriptionPrimary": "Natural .90/",
            "DescriptionSecondary": "Kilpatrick(GF/DF) /"
        },
        {
            "Item": "Rainbow trout patÃ© (GF available)",
            "Price": "15",
            "DescriptionPrimary": "served with crusty sourdough",
            "DescriptionSecondary": "Description Two"
        }
    ];

    function MenuItem(props) {
        return (
            <div className="menu-item">
                <div className="item-title">
                    <div>{props.item}</div>
                    <div>{props.itemPrice}</div>    
                </div> 
                <div className="item-description">
                    <div>{props.itemDescriptionOne}</div>
                    <div>{props.itemDescriptionTwo}</div>
                </div>    
            </div>
        );
    }

    function ReturnMenu(props) {
        const numbers = props.numbers;
        const renderedItems = numbers.map((number) => {
            <MenuItem item={number.Item} itemPrice={number.Price} itemDescriptionOne={number.DescriptionPrimary} itemDescriptionTwo={number.DescriptionSecondary}/>
            console.warn("This was done")
        });
        
        // console.log(renderedItems.Item);

        return (
            <ul>{renderedItems}</ul>
        );
        // return "Task completed sucessfully!";
    }

    ReactDOM.render(
        <ReturnMenu numbers={starter} />,
        document.getElementById('root')
    );
</script>

Answer 1

如果你看这里，你忘记了 return 这个值。在<MenuItem前加一个return，在console前加一个return。:

const renderedItems = numbers.map((number) => {
  console.warn("This was done");
  return <MenuItem item={number.Item} itemPrice={number.Price} itemDescriptionOne={number.DescriptionPrimary} itemDescriptionTwo={number.DescriptionSecondary}/>;
});

Answer 2

您的问题在这里：

 const renderedItems = numbers.map((number) => {
            <MenuItem item={number.Item} itemPrice={number.Price} itemDescriptionOne={number.DescriptionPrimary} itemDescriptionTwo={number.DescriptionSecondary}/>
            console.warn("This was done")
        });

您需要 return:

const renderedItems = numbers.map((number) => {
            return <MenuItem item={number.Item} itemPrice={number.Price} itemDescriptionOne={number.DescriptionPrimary} itemDescriptionTwo={number.DescriptionSecondary}/>
            console.warn("This was done")
        });

... 或（我的首选）删除大括号：

const renderedItems = numbers.map((number) => <MenuItem item={number.Item} itemPrice={number.Price} itemDescriptionOne={number.DescriptionPrimary} itemDescriptionTwo={number.DescriptionSecondary}/>);

在 React 中渲染对象数组中的元素

Rendering Elements from Object Array in React

javascript

arrays

object

reactjs

babeljs