Как я могу добавить более одной новой колонки в React-Data-Grid?

Question

Привет для проекта Мне нужно, чтобы пользователь выбрал столбцы, которые должны отображаться в таблице данных React.Некоторые столбцы могут быть предварительно установлены, другие могут быть добавлены позже.Тем не менее, я пытался, он не будет работать для более чем одного добавленного столбца, хотя состояние установлено соответственно и ошибка не отображается

Новый столбец будет выбран селектором. Это будет добавлено в состояниеиз табличного класса.Если попытаться передать его с помощью реквизита, который вызвал метод рендеринга, но он не обновил столбцы более одного раза.Я использовал разные / одинаковые наборы ключей.То же самое будет признано, если это был первый новый столбец.Я попытался отладить его, есть ли причина классифицировать nextColumns как неизмененные, но это не приблизило меня.

State.columns в режиме render ()

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)

ComponentCall

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

    />

Таким образом, цель состоит в том, чтобы создать все столбцы в соответствии с состоянием

Если необходимо больше кода, я с радостью предоставлю его

Приветствие Джонатана

Answer 1

Хорошо, решил это

в строке ок. 5804 в response-data-grid.js

    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 не будет обновляться.

в строке ок. 6500 в response-data-grid.js

    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 -> Нет визуального обновления. Даже если реквизит и состояние установлены правильно.

Таким образом, исключение if и изменение оператора return позволит вам добавить новые столбцы в вашу таблицу

Answer 2

Из документов :

ключ: уникальный ключ для различения каждого столбца

Вам необходимо использовать разные значения для key.Так что каждый key уникален