时间戳

首页 > 解决方案 > 在 React 中使用 useContext 和 useReducer 创建新的键值对

javascript - 在 React 中使用 useContext 和 useReducer 创建新的键值对

问题描述

我正在使用 useEffect 从 API 获取数据，这些数据通过调用调度函数来更新我的应用程序的上下文。

我想要更新上下文的同一个 reducer 函数，以便在我的响应对象中计算一些新的键值对。

响应对象是一个对象列表，每个对象都应该有一个键值对。

API 响应如下所示：

[{ID:'500T',
  values:[ 0 : {percentage: 0.4, cycles: 11400, hours: 212},
           1 : {percentage: 0.6, cycles: 12900, hours: 243},
           2 : {percentage: 0.3, cycles: 10100, hours: 197}]},

 {ID:'584T',
  values:[ 0 : {percentage: 0.8, cycles: 18400, hours: 277},
           1 : {percentage: 0.4, cycles: 10500, hours: 184},
           2 : {percentage: 0.9, cycles: 23100, hours: 306}]},

 {ID:'551T',
  values:[ 0 : {percentage: 0.2, cycles: 10400, hours: 177},
           1 : {percentage: 0.1, cycles: 10500, hours: 184},
           2 : {percentage: 0.4, cycles: 20100, hours: 106}]}]

我要做的是将此列表交给另一个函数，该函数将为每个函数创建另一个键值对，计算最大“百分比”并存储它。请参阅下文以获得更清晰的信息。

[{ID:'500T',
  values:[ 0 : {percentage: 0.4, cycles: 11400, hours: 212},
           1 : {percentage: 0.6, cycles: 12900, hours: 243},
           2 : {percentage: 0.3, cycles: 10100, hours: 197}],
  maxPercentage: 0.6},

 {ID:'584T',
  values:[ 0 : {percentage: 0.8, cycles: 18400, hours: 277},
           1 : {percentage: 0.4, cycles: 10500, hours: 184},
           2 : {percentage: 0.9, cycles: 23100, hours: 306}],
  maxPercentage: 0.9},

 {ID:'551T',
  values:[ 0 : {percentage: 0.2, cycles: 10400, hours: 177},
           1 : {percentage: 0.1, cycles: 10500, hours: 184},
           2 : {percentage: 0.4, cycles: 20100, hours: 106}]},
  maxPercentage: 0.4}]

提前感谢您的帮助

标签： javascriptreactjsobjectuse-context

解决方案

将数据映射到新数组。在映射期间，将values数组映射到百分比数组并展开Math.max以返回最大值。浅复制当前obj元素并添加新的maximumPercentage键/值属性。

const res = data.map((obj) => ({
  ...obj,
  maxPercentage: Math.max(...obj.values.map(({ percentage }) => percentage))
}));


const data = [
  {
    ID: "500T",
    values: [
      { percentage: 0.4, cycles: 11400, hours: 212 },
      { percentage: 0.6, cycles: 12900, hours: 243 },
      { percentage: 0.3, cycles: 10100, hours: 197 }
    ]
  },
  {
    ID: "584T",
    values: [
      { percentage: 0.8, cycles: 18400, hours: 277 },
      { percentage: 0.4, cycles: 10500, hours: 184 },
      { percentage: 0.9, cycles: 23100, hours: 306 }
    ]
  },
  {
    ID: "551T",
    values: [
      { percentage: 0.2, cycles: 10400, hours: 177 },
      { percentage: 0.1, cycles: 10500, hours: 184 },
      { percentage: 0.4, cycles: 20100, hours: 106 }
    ]
  }
];

const res = data.map((obj) => ({
  ...obj,
  maxPercentage: Math.max(...obj.values.map(({ percentage }) => percentage))
}));

console.log(res);

推荐阅读