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

Question

我正在使用 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}]

在此先感谢您的帮助

Answer 1

将数据映射到新数组。在映射过程中，将 values 数组映射到百分比数组，并将最大值扩展到 Math.max 到 return。浅复制当前的obj元素并添加一个新的maximumPercentagekey/value属性.

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);

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

Create new key-value pairs using useContext and useReducer in React

javascript

object

reactjs

use-context