如何将JSON响应解构为表？

我正在创建一个功能组件，正在从内部 API 获取一些数据，并且想知道如何将表行解构为稍微不那么冗长的内容。以下是我从这个 API 得到的响应。

{
"data": [
{
"id": "cc134653-c463-4e79-8b9e-f52dfe02498e",
"type": "bottle",
"attributes": {
"name": "Luc Belaire Rare Luxe",
"price": "$29.99",
"image": "https://cdn11.bigcommerce.com/s-
7a906/images/stencil/1000x1000/products/10929/10518/Luc-Belaire-Rare-Luxe__73902.1555086630.jpg?c=2",
"sku": "813497005010",
"size": "750ML",
"origination": "France",
"varietal": "Sparkling Wine"
}
},
}


我正在像这样设置组件的状态。

const [bottles, setBottles] = useState([]);
useEffect(() => {
fetch('http://localhost:3000/api/v1/bottles?', { method: "GET" })
.then(respOnse=> response.json())
.then(data => setBottles(data.data));
});


这就是我在组件中创建表格主体的方式，但我想知道是否有更好的方法来使用bottle.attributes.name和其他属性使其更像{name}. 我怎样才能做到这一点？


{bottles.map(bottle =>


{bottle.attributes.name}
{bottle.attributes.sku}
{bottle.attributes.price}
{bottle.attributes.size}
{bottle.attributes.origination}
{bottle.attributes.varietal}

)}



回答