BootstrapTable 在 React 中创建迭代器警告

IT技术 reactjs warnings bootstrap-table react-bootstrap-table
2022-07-29 02:09:38

我正在研究如何在 React.js 中创建表格。我有一个简单的代码,它采用这样的列表(硬编码):

data = [{
      "item1": 0.0,
      "item1": 0.0,
      "item1": 0,
      "item1": 0.36363636363636365,
      "item1": "string",
      "item1": 0,
      "item1": "string",
      "item1": "string",
      "item1": 0.0,
      "item1": 0.2569125,
      "item1": 0.0625,
      "item1": 0.0521760194628226,
      "item1": 2,
      "item1": 0.0534268,
      "item1": 0.0,
      "item1": 1180.0,
      "item1": 0.0
    }];

并在 render() 中创建一个 DataTable 对象:

render() {


    return (
      <div>
        <DataTable data = {data}/>
      </div>
    );
  }

该类只需执行以下操作:

class DataTable extends Component {

    createColumnsArray() {
        var columns = [];
        for (var i in this.props.data) {
            var keysArr = Object.keys(this.props.data[i]);
            for (var index in keysArr) {
                var element = {};
                element.dataField = keysArr[index];
                element.text = keysArr[index];
                columns.push(element);
            }
        }

        return columns;
    }

    render() {
        var columns = this.createColumnsArray();

        return (
            <div className="Tables">
                <p className="Table-header">Country Statistics</p>
                <BootstrapTable keyField='id' data={ this.props.data } columns={ columns } />
            </div>
        );
    }
}

export default DataTable

顺便说一句,Chrome 控制台上会出现以下警告:

index.js:2178 Warning: Each child in an array or iterator should have a unique "key" prop. See link for more information.
    in tbody (created by Body)
    in Body (created by BootstrapTable)
    in table (created by BootstrapTable)
    in div (created by BootstrapTable)
    in BootstrapTable
    in DataProvider (created by BootstrapTableContainer)
    in BootstrapTableContainer (at DataTable.js:27)
    in div (at DataTable.js:25)
    in DataTable (at App.js:43)
    in div (at App.js:39)
    in App (at index.js:9)

我真的不明白如何消除这个警告。

2个回答

编辑:您需要在数据数组中有一个 id 属性,因为您idkeyFieldprops中引用了它。您的数据数组应遵循以下结构:

data = [{
        "id": 1,
        "item1": 0.0,
        "item1": 0.0,
        "item1": 0,
        ...
    }, {
        "id": 2,
        "item2": 0.36363636363636365,
        "item2": "string",
        "item2": 0,
        "item2": "string",
        ...
    }...];

编辑:也只需更改keyField组件调用中的:<BootstrapTable keyField='item1' data={ this.props.data } columns={ columns } />正如您所发现的。

<BootstrapTable keyField='id' data={ this.props.data } columns={ columns } />

  1. keyField 必须是数据中存在的数据字段。即“id”是数据中现有的列名。
  2. keyfield 中的每个元素都不能为空且唯一。即“id”列中没有重复值或空值。
  3. 任何显示/隐藏列中的每个元素都不得为空。例如,列“itme1”是需要显示的列。列“item1”中不应有空值

因此,请确保关键字段的名称与数据字段中的名称匹配。通过删除和/或转换 null 来清理数据。