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-string

IE

<BootstrapTable

   keyField="dataField"

   data={this.state.timestamps}

   columns={columns}

   pagination={paginationFactory()}

/>

Answer 2

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

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;