亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

React:映射數據

React:映射數據

慕姐8265434 2023-07-20 15:50:39
我正在嘗試映射數組中的數據,但是,當我運行代碼時,數據并未映射。如果我記錄數據(序列變量),它會記錄我想要映射的變量(下面的屏幕截圖)。有人對為什么數據沒有映射有任何建議嗎?numberList() {  const uid = this.state.user.uid;    const serialRef = db.ref(uid + "/serials");        serialRef.on("value", (serial_numbers)=> {      const serials = [];      serial_numbers.forEach((serial_number)=> {        serials.push({s:serial_number.val()});      });      console.log(serials);  return (    <div>      {serials.map((number) => <Card>      <Card.Body>{number.s.serial}</Card.Body> </Card>)}    </div>  );    });}        render (){        return (          <button onClick={this.numberList}>Cards</button>        )};}
查看完整描述

2 回答

?
萬千封印

TA貢獻1891條經驗 獲得超3個贊

您沒有從組件中渲染任何內容


在處理數組之后,理想情況下,您應該將其設置為會導致組件重新渲染的狀態,并且如果您從如下狀態渲染序列,它將在加載后顯示。單擊按鈕后,數字列表函數將執行并使用數據設置狀態,并將其映射和顯示。


根據您當前的代碼,您只需映射并返回未在任何地方使用的項目,因此您應該遵循以下模式。


class Serials extends Component {

  state = {

    serials: [],

  };

  numberList() {

    const uid = this.state.user.uid;

    const serialRef = db.ref(uid + '/serials');


    serialRef.on('value', (serial_numbers) => {

      const serials = [];

      serial_numbers.forEach((serial_number) => {

        serials.push({ s: serial_number.val() });

      });

      this.setState({ serials: serials });

    });

  }


  render() {

    return (

      <div>

        <button onClick={this.numberList}>Cards</button>

        <div>

          {this.state.serials.map((number) => (

            <Card>

              <Card.Body>{number.s.serial}</Card.Body>

            </Card>

          ))}

        </div>

      </div>

    );

  }

}


查看完整回答
反對 回復 2023-07-20
?
叮當貓咪

TA貢獻1776條經驗 獲得超12個贊

serials應該是組件狀態的一部分,由單擊處理程序更新,并映射到方法中render。


state = {

  serials: [],

};


...


numberList() {

  const { user: { uid } } = this.state;

  const serialRef = db.ref(uid + "/serials");


  serialRef.on("value", (serial_numbers)=> {

    this.setState({

      serials: serial_numbers.map(s => ({ s: s.val() })),

    });

  });

}


...


render () {

  const { serials } = this.state;


  return (

    <div>

      <button onClick={this.numberList}>Cards</button>

      <div>

        {serials.map((number) => (

          <Card>

           <Card.Body>{number.s.serial}</Card.Body>

          </Card>

        ))}

      </div>

    </div>

  )};

}


查看完整回答
反對 回復 2023-07-20
  • 2 回答
  • 0 關注
  • 158 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號