reactjs - 使用道具将数据插入表中

Question

我正在使用 reactjs。我正在使用 devextreme-reactive 可编辑表组件。

当我想将收到的 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>

Answer 1

你所要做的就是当且仅当数据的长度大于0时有条件地渲染它。

<Paper style={{width: "100%"}}>
{ 
  this.props.customerDebts.customerAllDebts.customerAllDebts.length > 0 &&
  <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},
    ]}
  />