Question

我是前端编程的新手/初级版，但我正在帮助其他人为应用程序构建Web UI。在大多数情况下，我已经学到了足够的基本知识，但我正在尝试添加一个有点困难的功能。

长话短说，我有两个ag-grid（使用reactJS）。主要保存数据并且可以进行过滤，我正在尝试制作第二个，不仅保存主要列名称，还动态列出应用的过滤器。第二个网格就像是用户的助手/辅助网格

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

列标题数据已存储并从道具中获取。类似于：

rowData：this.props.report.view.columns

如果您运行console.log（this.props.report.view.columns）（我正在使用Chrome开发人员工具中的控制台），您将看到一个包含列信息的17个对象的数组。结构如下所示：

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

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

我有另一个道具，它给出了关键：只有应用过滤器的列的值对（即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个键：值对的17个对象数组更改为具有3个键值对的17个对象数组这样的事情可能吗？如果是这样我可以得到一些建议吗？我有点担心我用的整个计划都是错的。我的高级同事建议我使用不同的计划使用回调，但我没有看到如果没有重大的代码更改，这是怎么可能的（这就是为什么我坚持我的直觉）

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：更新道具 - 将一个包含2个键：值对的17个对象数组转换成一个具有3个键：值对的

1 个答案: