第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

React-Bootstrap-Table:列表中的每個(gè)孩子都應(yīng)該有一個(gè)獨(dú)特的“關(guān)鍵”道具

React-Bootstrap-Table:列表中的每個(gè)孩子都應(yīng)該有一個(gè)獨(dú)特的“關(guān)鍵”道具

Smart貓小萌 2022-12-29 16:37:16
我一直在嘗試創(chuàng)建一個(gè) react-bootstrap-table2 但我收到以下警告:列表中的每個(gè)孩子都應(yīng)該有一個(gè)獨(dú)特的“關(guān)鍵”道具。這是我的代碼: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;這是包含我要顯示的數(shù)據(jù)列表的控制臺(tái)所以我的問題是如何給列表中的每個(gè)孩子一個(gè)唯一的鍵。
查看完整描述

2 回答

?
慕斯王

TA貢獻(xiàn)1864條經(jīng)驗(yàn) 獲得超2個(gè)贊

您keyField應(yīng)該設(shè)置為dataField(鍵)而不是timestamps(值)。此外,不需要數(shù)據(jù)映射。


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

/>


查看完整回答
反對(duì) 回復(fù) 2022-12-29
?
湖上湖

TA貢獻(xiàn)2003條經(jīng)驗(yàn) 獲得超2個(gè)贊

您正在傳遞整數(shù)數(shù)組而不是具有“時(shí)間戳”屬性的對(duì)象數(shù)組。


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;


查看完整回答
反對(duì) 回復(fù) 2022-12-29
  • 2 回答
  • 0 關(guān)注
  • 95 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)