如何将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}. 我怎样才能做到这一点？

<tbody>
    {bottles.map(bottle =>
        <tr key={bottle.id}>
            <td><img src={bottle.attributes.image} alt={bottle.attributes.name} height={150} width={100}/></td>
            <td>{bottle.attributes.name}</td>
            <td>{bottle.attributes.sku}</td>
            <td>{bottle.attributes.price}</td>
            <td>{bottle.attributes.size}</td>
            <td>{bottle.attributes.origination}</td>
            <td>{bottle.attributes.varietal}</td>
        </tr>
     )}
</tbody>

回答

   {bottles.map(({ id, attributes: { image, name, sku, price, size, origination, varietal }}) =>
        <tr key={id}>
            <td><img src={image} alt={name} height={150} width={100}/></td>
            <td>{name}</td>
            <td>{sku}</td>

<tbody>
    {bottles.map(({ id, attributes }) =>
        <tr key={id}>
            <td><img src={attributes.image} alt={attributes.name} height={150} width={100}/></td>
            <td>{attributes.name}</td>
            <td>{attributes.sku}</td>