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

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

React:映射數(shù)據(jù)

React:映射數(shù)據(jù)

慕姐8265434 2023-07-20 15:50:39
我正在嘗試映射數(shù)組中的數(shù)據(jù),但是,當(dāng)我運(yùn)行代碼時(shí),數(shù)據(jù)并未映射。如果我記錄數(shù)據(jù)(序列變量),它會(huì)記錄我想要映射的變量(下面的屏幕截圖)。有人對(duì)為什么數(shù)據(jù)沒(méi)有映射有任何建議嗎?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 回答

?
萬(wàn)千封印

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

您沒(méi)有從組件中渲染任何內(nèi)容


在處理數(shù)組之后,理想情況下,您應(yīng)該將其設(shè)置為會(huì)導(dǎo)致組件重新渲染的狀態(tài),并且如果您從如下?tīng)顟B(tài)渲染序列,它將在加載后顯示。單擊按鈕后,數(shù)字列表函數(shù)將執(zhí)行并使用數(shù)據(jù)設(shè)置狀態(tài),并將其映射和顯示。


根據(jù)您當(dāng)前的代碼,您只需映射并返回未在任何地方使用的項(xiàng)目,因此您應(yīng)該遵循以下模式。


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>

    );

  }

}


查看完整回答
反對(duì) 回復(fù) 2023-07-20
?
叮當(dāng)貓咪

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

serials應(yīng)該是組件狀態(tài)的一部分,由單擊處理程序更新,并映射到方法中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>

  )};

}


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

添加回答

舉報(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)