reactjs — Вставка данных в таблицы с реквизитами

#reactjs #react-props #devextreme

#reactjs #реагировать-реквизит #devextreme

Вопрос:

я использую reactjs. Я использую компонент devextreme-reactive editable-table для редактирования.

Я получаю сообщение об ошибке, когда хочу добавить данные json, которые я получил в виде ArrayList с помощью this.props.customer.customerDebts.customerAllDebts, в таблицу следующим образом.

Как я могу это исправить?

https://ibb.co/zrXmz9m

  <Paper style={{width: "100%"}}>
        <Grid
          rows={this.props.customerDebts.customerAllDebts.json}
          columns={this.state.columns}
        >
          <EditingState
            onCommitChanges={this.commitChanges}
            columnExtensions={[
              {columnName: "first_name", editingEnabled:false},
              {columnName: "last_name", editingEnabled:false},
            ]}
          />
          <PagingState
            defaultPageSize={5}
            defaultCurrentPage={5}
          />
          <IntegratedPaging />
          <Table />
          <TableColumnResizing
            defaultColumnWidths={this.state.defaultColumnWidths}
          />
          <TableHeaderRow />
          <PagingPanel
            pageSizes={this.state.pageSizes}
            messages={this.pagingPanelMessages}
          />
          <TableEditRow />
          <TableEditColumn
            showAddCommand
            showEditCommand
            showDeleteCommand
            commandComponent={Command}
          />
          <TableBandHeader
            columnBands={this.state.columnBands}
          />
        </Grid>
      </Paper>
  

Комментарии:

1. В чем ошибка?

2. Я получаю ошибку, как на картинке, я не могу импортировать данные в this.props.customerDebts.customerAllDebts, это выдает ошибку.

3. пожалуйста, помогите мне.

Ответ №1:

Все, что вам нужно сделать, это условно отобразить их тогда и только тогда, когда длина данных больше 0.

 <Paper style={{width: "100%"}}>
{ 
  this.props.customerDebts.customerAllDebts.customerAllDebts.length > 0 amp;amp;
  <Grid
  rows={ this.props.customerDebts.customerAllDebts.customerAllDebts }
  columns={this.state.columns}>
}
  <EditingState
    onCommitChanges={this.commitChanges}
    columnExtensions={[
      {columnName: "first_name", editingEnabled:false},
      {columnName: "last_name", editingEnabled:false},
    ]}
  />
  

Комментарии:

1. Я поделился всем кодом, потому что получил ошибку. можете ли вы отредактировать это снова

2. не могли бы вы, пожалуйста, поделиться со мной ссылкой на code sandbox здесь, которая даст мне четкое представление о том, почему вы снова получаете ошибку?