javascript - react-bootstrap-table 键域在初始组件渲染时未定义

Question

当我的组件最初呈现我的应用程序崩溃并且我收到 TypeError: Cannot read property '_id' of undefined.

_id 是数据数组中的一个字段，我给出了从 mongoDB 数据库获得的表。

如果我在出现此错误后刷新页面，它会正常加载，并且一切都按我的预期工作。

我尝试了不同的尝试来阻止组件渲染，直到获取数组，例如向我的状态添加加载字段并在 api 调用完成后将其设置为 true，并且仅在 this.state.loading 为 true 时才渲染组件否则只是一个空的div，但没有任何效果。

async componentDidMount() {
await this.getFoods()
this.setState({ loaded: true })
}

return (
  <>
    {this.state.loaded ? (
      <Row>
        <Col xl={8}>
          <Card>
            <Card.Header className='text-center'>
              <h1>All Foods</h1>
            </Card.Header>
            <Card.Body>
              <ToolkitProvider
                bootstrap4
                keyField='_id'
                data={this.state.foods}
                columns={this.columns}
                search
              >
                {(props) => (
                  <>
                    <SearchBar {...props.searchProps} />
                    <ClearSearchButton {...props.searchProps} />
                    <BootstrapTable
                      defaultSorted={this.defaultSorted}
                      pagination={this.pagination}
                      {...props.baseProps}
                    />
                  </>
                )}
              </ToolkitProvider>
            </Card.Body>
          </Card>
        </Col>
        <Col xl={4}>
          <AdminNewFoodForm
            handleSubmit={this.handleSubmit}
            handleChange={this.handleChange}
          />
        </Col>
      </Row>
    ) : (
      ''
    )}

这是我的专栏也供参考

  columns = [
{ dataField: 'name', text: 'Name', sort: true },
{ dataField: 'calories', text: 'Calories', sort: true },
{ dataField: 'protein', text: 'Protein', sort: true },
{ dataField: 'carbs', text: 'Carbohydrates', sort: true },
{ dataField: 'fat', text: 'Fat', sort: true },
{
  dataField: 'remove',
  text: 'Remove',
  formatter: (rowContent, row) => {
    return (
      <Button
        onClick={() => {
          this.handleRowClick(row)
        }}
      >
        Delete
      </Button>
    )
  },
},]

标签： javascriptreactjsreact-bootstrap-table