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;

这是包含我要显示的数据列表的控制台

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

Answer 1

您keyField应该设置为dataField（键）而不是timestamps（值）。此外，不需要数据映射。https://react-bootstrap-table.github.io/react-bootstrap-table2/docs/table-props.html#keyfield-required-stringIE<BootstrapTable&nbsp; &nbsp;keyField="dataField"&nbsp; &nbsp;data={this.state.timestamps}&nbsp; &nbsp;columns={columns}&nbsp; &nbsp;pagination={paginationFactory()}/>

Answer 2

您正在传递整数数组而不是具有“时间戳”属性的对象数组。export const columns = [&nbsp;{&nbsp; &nbsp;dataField: "timestamp",&nbsp; &nbsp;text: "Timestamp",&nbsp;},];class Table extends Component {&nbsp; constructor(props) {&nbsp; &nbsp;super(props);&nbsp; &nbsp;this.state = { timestamps: [] };&nbsp; }&nbsp;&nbsp;componentDidMount() {const database = db.ref().child("timestamped_measures");database.on("value", (ts_measures) => {&nbsp; const timestamps = [];&nbsp; ts_measures.forEach((ts_measure) => {&nbsp; &nbsp; timestamps.push({ timestamp: ts_measure.val().timestamp });&nbsp; });&nbsp; console.log(timestamps);&nbsp; this.setState((prevState) => {&nbsp; &nbsp; return { timestamps: [...prevState.timestamps, ...timestamps] };&nbsp; });});}&nbsp;render() {&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div className="App">&nbsp; &nbsp; &nbsp; &nbsp; <BootstrapTable&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; keyField="timestamp"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data={this.state.timestamps}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; columns={columns}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; pagination={paginationFactory()}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;/>&nbsp; &nbsp; &nbsp; &nbsp;</div>&nbsp; &nbsp; );&nbsp; &nbsp; }&nbsp; }&nbsp;export default Table;