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

Question

我一直在尝试创建一个 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

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

任何帮助将不胜感激！

Answer 1

您传递的是整数数组，而不是具有“时间戳”属性的对象数组。

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;

Answer 2

您的keyField 应该设置为dataField(key) 而不是timestamps(value)。此外，不需要数据映射。

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()}
/>