Reat-Bootstrap-Table：列表中的每个孩子都应该有一个唯一的“关键”道具

问题描述

我一直在尝试创建react-bootstrap-table2，但收到以下警告：列表中的每个孩子都应该有一个唯一的“键”道具。

这是我的代码：

export const columns = [
  {
    datafield: "timestamps",text: "Timestamp",},];

class Table extends Component {
  constructor(props) {
    super(props);
    this.state = { timestamps: [] };
  }
  componentDidMount() {
    const database = db.ref().child("timestamped_measures");
    database.on("value",(ts_measures) => {
      const timestamps = [];
      const columns = [{ datafield: "timestamps",text: "Timestamp" }];
      ts_measures.forEach((ts_measure) => {
        timestamps.push(ts_measure.val().timestamp);
      });
      console.log(timestamps);
      this.setState((prevstate) => {
        return { timestamps: [...prevstate.timestamps,...timestamps] };
      });
    });
  }

  render() {
    return (
      <div className="App">
        <BootstrapTable
          keyField="timestamps"
          data={this.state.timestamps.map((item) => ({ item }))}
          columns={columns}
          pagination={paginationFactory()}
        />
      </div>
    );
  }
}
export default Table;

Here is the console with the list of data I am trying to display

所以我的问题是如何给列表中的每个孩子一个唯一的键。

任何帮助将不胜感激！

解决方法

您应该将keyField设置为dataField（键）而不是timestamps（值）。另外，不需要数据映射。

https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/table-props.html#keyfield-required-string

即

<BootstrapTable
   keyField="dataField"
   data={this.state.timestamps}
   columns={columns}
   pagination={paginationFactory()}
/>

,

您正在传递整数数组，而不是具有“ timestamp”属性的对象数组。

export const columns = [
 {
   dataField: "timestamp",text: "Timestamp",},];

class Table extends Component {
  constructor(props) {
   super(props);
   this.state = { timestamps: [] };
  }
  
componentDidMount() {
const database = db.ref().child("timestamped_measures");
database.on("value",(ts_measures) => {
  const timestamps = [];
  ts_measures.forEach((ts_measure) => {
    timestamps.push({ timestamp: ts_measure.val().timestamp });
  });
  console.log(timestamps);
  this.setState((prevState) => {
    return { timestamps: [...prevState.timestamps,...timestamps] };
  });
});
}

 render() {
    return (
      <div className="App">
        <BootstrapTable
          keyField="timestamp"
          data={this.state.timestamps}
          columns={columns}
          pagination={paginationFactory()}
         />
       </div>
    );
    }
  }
 export default Table;