Блог

я использую 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>
  

Все, что вам нужно сделать, это условно отобразить их тогда и только тогда, когда длина данных больше 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},
    ]}
  />