Question

我正在执行代码挑战，并且对React还是一个新手。我习惯于对事物进行硬编码，并且需要从JS文件中循环输入数据。我对HTML和CSS很熟悉，因此样式设置不会有问题，但是如何在不进行硬编码的情况下从菜单项中提取数据。以下是我在项目文件中拥有的链接，以及它们的外观参考。谢谢！

  [1]: https://i.stack.imgur.com/JtE4X.png
  [2]: https://i.stack.imgur.com/n412K.png
  [3]: https://i.stack.imgur.com/ZVSl2.png

Answer 1

这是一个简化的示例

交互式沙箱

https://codesandbox.io/s/lucid-lovelace-kr6rr?fontsize=14&hidenavigation=1&theme=dark

这是代码：


function myComponent() {

    // Here's your data
    // You'll probably want to set this to state after fetching it
    // (It doesn't need to be in a const)
    const myList = [
        "https://i.stack.imgur.com/JtE4X.png", 
        "https://i.stack.imgur.com/n412K.png", 
        "https://i.stack.imgur.com/ZVSl2.png"
        ];

    // map over your data
    // here we are rendering an html img for each item
    // and we give each a key to help react keep a record of what is has rendered
    return (
        <div>
            {myList.map(url => <img src={url} key={url} />)}
        </div>
    )
}

希望有帮助！

Answer 2

在第19行，尝试

let menuItems = this.state.menuItems.map((item) => {
    <MenuItem name={item.name} img={item.imageName} price={item.details.price} />
}

然后返回，

<div id="combo-header">
    <h1>Combo Meals</h1>
    {menuItems} 
</div>

您还可以选择在渲染中循环，而不是分配给自己的menuItem变量。

<div id="combo-header">
    <h1>Combo Meals</h1>
    {this.state.menuItems.map((item) => {
        <MenuItem name={item.name} img={item.imageName} price={item.details.price} />
    }}
</div>

请注意，第二个选项要求将JavaScript包装在{}中，以便您可以直接在JSX中编写JavaScript。

此后，您将编写一个MenuItem组件，该组件将吸收上面的道具。

在映射数组之前，还必须检查数组是否为空，否则会出错。

新手到React：任何帮助将不胜感激

2 个答案: