如何通过对象数组映射并单独显示每个对象?我希望每个披萨订单都能显示出来

Question

我不知道如何迭代每个订单并将其显示为单独的订单。api响应如下。。。

0:

地壳：；"薄"；

风味："CHEESE"；

订单ID：2

尺寸："；S〃；

表_编号：5

时间戳："2019-12-03T18:21:08.708470"；

并且可以继续获得尽可能多的订单。我不需要显示Order_ID，所以这可能是一种迭代的方式？

import React, { Component } from 'react'
import axios from 'axios';
export default class Orders extends Component {
constructor() {
super();
this.state = {
order: "no orders yet",
crust: "no crust selected",
// flavor: "no flavor selected",
// size: "no size selected",
// table: "place an order first",
// timestamp: "place an order first"
};
}
handleButtonClick = () => {
axios.get("/orders").then(response => {
this.setState({
orders: response,
crust: response.data[0].Crust
// flavor: response.data[0].Flavor
//etc..
});
})
}
render() {
return(
<div>
<button onClick={this.handleButtonClick}></button>
<h1>orders are:</h1>
<p>Crust: {this.state.crust}</p>
</div>
);
}
}
export { Orders }

Answer 1

根据我从您的代码块中了解到的情况，这应该是可行的。只需将orders数组设置为response.data，然后在渲染函数中迭代orders数组。

constructor() {
super();
this.state = {
orders: []
};
}
handleButtonClick = () => {
axios.get("/orders").then(response => {
this.setState({
orders: response.data
});
})
}
render() {
const orderData = this.state.orders.map(order => {
return })
return(
<div>
<button onClick={this.handleButtonClick}></button>
<h1>orders are:</h1>
{this.state.orders.map((order) => (
<p>Flavor: {order.flavor}</p>
<p>Crust: {order.crust}</p>
))}
</div>
);
}

Answer 2

由于您的状态有orders数组，您需要在模板上对其进行迭代，使用映射，然后呈现每个订单所需的元素。

与其只是从状态中渲染地壳，不如这样做：

{this.state.orders.map((order) => (
<p>Crust: {order.crust}</p>
))}

我很快创建了一个CodeSandbox的例子。