ReactJS：更新 props - 将 17 object 数组的 2 key:value 对变成一个有 3 key:value 对的数组

Question

我相当 new/junior 前端编程，但我正在帮助另一个人为应用程序构建网络 UI。在大多数情况下，我已经学到了足够多的东西，可以对所有内容有一个基本的了解，尽管我正在尝试添加一个有点困难的功能。

长话短说，我有两个 ag-grids（使用 reactJS）。主要的一个保存数据并且可以被过滤，我正在尝试制作第二个，它不仅保存主要的列名，而且还动态列出所应用的过滤器。第二个网格就像用户

的 assistant/helper 网格

到目前为止，我的理解帮助我实现了一半（我已经设法用主网格中的所有列 headers 填充第二个 ag-grid）。

列标题数据是从道具中存储和提取的。类似于：

行数据：this.props.report.view.columns

如果你运行 console.log(this.props.report.view.columns)（我使用的是 chrome 开发者工具的控制台），你会看到一个包含 17 objects 保存列信息。结构如下所示：

report: Object
|
--view: Object
  |
  --columns: Array(17)
    |
    --0: Object
    |  |
    |  -- field: "testColumn"
    |     headerName: "testColumn"
    |
    --1: Object
    --2: Object
    --3: Object
.
.
.   
    --16: Object

我只想说这看起来像一个包含 17 个 object 的数组，每个包含两个 key:value 对。我想要做的是添加第三个键值对

我有另一个道具，它给出 key:value 对仅应用了过滤器的列（即 columnName:blah ， filter:blahh ，其中列名存储在不同的键名下）。

我打算实现的伪代码是这样的：

For EACH element in the 17 Object array (this.props.report.view.columns)
    if headername = columnName (i.e. from column from filter prop)
THEN
    add new key:value pair headerName:filter; to that object element
ELSE 
    add new key:value pair headerName:''; (an empty value) to that object

我最终要做的是将这个由 2 个 key:value 对组成的 17 object 数组更改为具有 3 个键值对的 17 object 数组这样的事情可能吗？如果可以，我可以得到一些建议吗？我有点担心我使用的整个计划是错误的。我的资深同事建议我使用回调来使用不同的计划，但我没有看到如果没有重大代码更改怎么可能（这就是为什么我坚持我的直觉）

Answer 1

用map方法？ https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/map

const data = [
  {a: 7, b: 0},
  {a: 4, b: 7},
  {a: 9, b: 6},
  {a: 1, b: 7},
];

const newData = data.map(currObj => ({...currObj, c: 0}));

console.log(newData);

ReactJS：更新 props - 将 17 object 数组的 2 key:value 对变成一个有 3 key:value 对的数组

ReactJS: updating props - turning a 17 object array of 2 key:value pairs into one with 3 key:value pairs

javascript

arrays

reactjs

prop

ag-grid-react