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

Posted 2023-04-14

【中文标题】在 React 中使用 useContext 和 useReducer 创建新的键值对

【英文标题】：Create new key-value pairs using useContext and useReducer in React

【发布时间】：2021-09-11 07:11:30

【问题描述】：

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

提前感谢您的帮助

【参考方案1】：

将数据映射到一个新数组。在映射过程中，将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);

【讨论】：

这正是我想要做的！非常感谢你。不确定这属于“高级”还是“中级”，但我什至不知道如何用谷歌搜索。

@ortunoa 哪个方面？将一个数组映射到下一个以添加属性，还是从数组中计算最大值？我会说这些是知识项目的基本水平，但它更像是了解/学习如何将问题分解为更容易解决的较小部分。

是的，所有的组合，解构然后创建映射到函数的新键值对。我想它只是有一堆活动部件，使它有点混乱，但它就像一个魅力。我猜这会返回一个数组，对吗？ ( ...obj.values.map(( percent ) => percent) )

@ortunoa Affirmative, obj.values.map(( percentage ) => percentage) 生成一个百分比值数组，即[0.4, 0.6, 0.8, ....] 并将其传播到Math.max 中传递所有值，即就像您调用了Math.max(0.4, 0.6, 0.8, ....)。

不会忘记这个，在我来到这里之前花了我将近 2 个小时的头撞。再次感谢。