如何向 React-Data-Grid 添加多个新列？答案

【问题标题】：How can i add more than one new Column to a React-Data-Grid?如何向 React-Data-Grid 添加多个新列？
【发布时间】：2019-04-03 11:25:02
【问题描述】：

嗨，对于一个项目，我需要用户选择应该在 React 数据网格中显示的列。一些列可能是预设的，其他列可能会在以后添加。但是我尝试过，即使状态已相应设置并且没有显示错误，它也不会适用于多个添加的列

新列将由选择器选择。这将被添加到表类的状态中。如果尝试通过强制渲染方法的道具传递它，但它也没有多次更新列。我使用了不同/相同的键集。如果它是第一个新列，则将识别相同。我尝试调试它是否有任何理由将 nextColumns 归类为未更改，但它并没有让我更接近。

在 render() 中的 state.columns

0: {key: "date", name: "Date"}   ->Preset
1: {key: "date", name: "Date1"}  ->Added and created
2: {key: "ffd", name: "Testfdg2"}->Added to state not created
3: {key: "test", name: "Test3"}  ->Not created
4: {key: "test", name: "Test4"}
5: {key: "test", name: "Test5"}
6: {key: "test", name: "Test6"}
length: 7
__proto__: Array(0)

组件调用

<ReactDataGrid
    columns={this.state.columns}
    rowGetter={i => this.handleRowGetter(i)}
    rowsCount={this.rowsCount()}
    minHeight={500}
    minColumnWidth={10}
    onGridSort={(sortColumn, sortDirection)=>this.gridSort(sortColumn, sortDirection)}
    toolbar={
      <Toolbar enableFilter={true}
    />}
    onAddFilter={this.handleFilterChange}
    onClearFilters={this.handleOnClearFilters}
    onRowDoubleClick={(click,row) =>{this.handleClick(click,row)}}

    />

所以目标是根据状态创建所有列

如果需要更多代码，我很乐意提供

问候乔纳森

【问题讨论】：

标签： reactjs react-data-grid

【解决方案1】：

来自docs：

key：区分每一列的唯一键

您需要为key 使用不同的值。所以每个key 都是唯一的

【讨论】：

正如我所说的那样，没有区别。与状态示例一样，重复键列将被显示/创建。但是它会触发警告

【解决方案2】：

好的解决了

在 ca 行。 react-data-grid.js 中的 5804

    if (!ColumnMetrics.sameColumns(this.props.columns, nextProps.columns,this.props.columnEquality) || nextProps.minWidth !== this.props.minWidth) {
          var columnMetrics = this.createColumnMetrics(nextProps);
          this.setState({ columnMetrics: columnMetrics });
       }

this.props.columns 将与下一个 props.columns 相同，因此不会更新 columnMetrics。

在 ca 行。 react-data-grid.js 中的 6500

    this.setupGridColumns = function () {
    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0]:_this2.props;
    var columns = props.columns;

    if (_this2._cachedColumns === columns) {
      return _this2._chachedComputedColumns;
    }

更多 _this2._cachedColumns 将与 props.columns 相同，因此返回 cachedComputedColumns

所以 ColumnMetrics 没有真正的更新 -> 没有视觉更新。即使 props 和 state 设置正确。

因此排除 if 并更改 return 语句将使您可以将新列添加到表中

【讨论】：