时间戳

首页 > 解决方案 > 在 React 中从对象数组中渲染元素

javascript - 在 React 中从对象数组中渲染元素

问题描述

我正在尝试使用 React 渲染数组内部的对象。我想要实现的是创建一个将嵌套对象作为输入并返回对象的菜单。但是，第 62 行的返回函数没有返回const renderItems

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 $20.90/$39",
            "DescriptionSecondary": "Kilpatrick(GF/DF) $24/$42"
        },
        {
            "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>

标签： javascriptarraysreactjsobjectbabeljs

解决方案

如果你看这里，你忘记return了价值。return在之前添加一个<MenuItem并将其放在它console之前。：

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

推荐阅读