在React中向API结果添加额外属性

8 浏览
0 Comments

在React中向API结果添加额外属性

我在React中进行API调用，并希望为结果添加一个额外的价格属性，使每个结果的属性值都不同。

例如...

API响应：

 {
     id: 456
     name: "卡布奇诺",
     type: "咖啡",
  },
  {
     id: 457
     name: "拿铁",
     type: "咖啡",
  },
  {
     id: 458
     name: "美式咖啡",
     type: "咖啡",
   }

有没有办法动态添加一个额外的价格属性，并为每个结果设置不同的值来得到下面的结果？

  {
     id: 456
     name: "卡布奇诺",
     type: "咖啡",
     **价格: 5.99**   
  },
  {
     id: 457
     name: "拿铁",
     type: "咖啡",
     **价格: 10.00**
  },
  {
     id: 458
     name: "美式咖啡",
     type: "咖啡",
     **价格: 8.90**
   }

0

1 答案

0 Comments

在React中向API结果添加额外属性的问题通常出现在需要在渲染组件时动态添加数据的情况下。解决方法是使用map()方法和索引来将价格映射到正确的对象。

以下是一个示例代码，展示了如何将价格添加到API结果中的每个对象中：

const response = [
  {
    id: 456,
    name: "capuccino",
    type: "coffee",
  },
  {
    id: 457,
    name: "latte",
    type: "coffee",
  },
  {
    id: 458,
    name: "americano",
    type: "coffee",
  }
];
const prices = [2, 5, 27];
const result = response.map((o, i) => ({ ...o, price: prices[i] }));
console.log(result);

在这个例子中，response是从API获取的原始数据，prices是一个包含价格的数组。我们使用map()方法对response数组进行遍历，并在每个对象上添加一个名为price的属性，该属性的值来自于prices数组中对应的索引。

最后，我们打印出result数组，其中包含了添加了price属性的API结果对象。

这个方法可以用来动态地在React组件中添加额外的属性，以便在渲染时使用这些数据。

0