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

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

未處理的拒絕(TypeError):無(wú)法讀取未定義的屬性“城市”

未處理的拒絕(TypeError):無(wú)法讀取未定義的屬性“城市”

慕神8447489 2022-11-11 14:56:00
我目前正在開(kāi)發(fā)一個(gè)網(wǎng)站,在這里可以檢索團(tuán)隊(duì)信息:export default class TeamInfo extends React.Component{        constructor(props) {        super(props);             this.state = {          isShow: true,          team: []        };        this.getTeam();      }        getTeam(){        const axios = require("axios");        const team_id = this.props.id;        axios.get(API+'/team/'+ team_id).then(res => {            this.setState({team : res.data})            console.log('inside teaminfo... ' + this.state.team.location.city);        })    } render() {        return(         <div><h1>{this.state.team.location.city}</h1></div>)}}這是團(tuán)隊(duì) JSON 答案的結(jié)構(gòu):{    "name": "Barcelona",    "shield": "shield.png",    "location": {        "city": "Barcelona",        "country": "SPAIN"    },    "score": 74626,}我正在嘗試訪問(wèn)團(tuán)隊(duì)位置 this.state.team.location.city ,因?yàn)楫?dāng)我在控制臺(tái)中登錄時(shí)它顯示正確,但Unhandled Rejection (TypeError): Cannot read property 'city' of undefined顯示在網(wǎng)站中。任何提示或幫助將不勝感激。
查看完整描述

3 回答

?
慕姐4208626

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

您的團(tuán)隊(duì)數(shù)據(jù)在您的構(gòu)造函數(shù)中初始化,如下所示


this.state = {

  isShow: true,

  team: []

};

這在第一次渲染期間導(dǎo)致錯(cuò)誤,因?yàn)?.team.location.city 未定義。在第二次渲染中,使用新值 setState 后會(huì)很好。


要解決此問(wèn)題,您需要檢查該值是否未定義或在構(gòu)造函數(shù)中設(shè)置 location.city 的初始值。


render() {

        return(

         <div><h1>{typeof this.state.team.location !== "undefined"  && typeof this.state.team.location.city !== "undefined" && this.state.team.location.city}</h1></div>

)}


查看完整回答
反對(duì) 回復(fù) 2022-11-11
?
慕勒3428872

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

給定組件代碼,您state.team是一個(gè)數(shù)組,因此您需要使用數(shù)組索引來(lái)訪問(wèn)它。


this.state.team[0].location.city

OFC,這假定數(shù)組已填充,因此首先使用保護(hù)檢查以確保第一個(gè)元素存在。


this.state.team[0] && this.state.team[0].location.city

您也可以有條件地渲染它


export default class TeamInfo extends React.Component {

  constructor(props) {

    super(props);


    this.state = {

      isShow: true,

      team: []

    };

    this.getTeam();

  }


  getTeam() {

    const axios = require("axios");

    const team_id = this.props.id;

    axios.get(API + "/team/" + team_id).then(res => {

      this.setState({ team: res.data });

    });

  }

  render() {

    return this.state.team[0] ? (

      <div>

        <h1>{this.state.team[0].location.city}</h1>

      </div>

    ) : null;

  }

}

而且由于它是一個(gè)數(shù)組,映射結(jié)果也是一種常見(jiàn)的模式


export default class TeamInfo extends React.Component {

  constructor(props) {

    super(props);


    this.state = {

      isShow: true,

      team: []

    };

    this.getTeam();

  }


  getTeam() {

    const axios = require("axios");

    const team_id = this.props.id;

    axios.get(API + "/team/" + team_id).then(res => {

      this.setState({ team: res.data });

    });

  }

  render() {

    return (

      {this.state.team.map(team => (

        <div>

          <h1>{team.location.city}</h1>

        </div>

      ))}

    );

  }

}

筆記:


this.setState({team : res.data})

console.log('inside teaminfo... ' + this.state.team.location.city);

狀態(tài)更新是“異步的”,更新發(fā)生在渲染周期之間,因此控制臺(tái)日志只會(huì)記錄此渲染周期的當(dāng)前狀態(tài)。在生命周期函數(shù)中記錄更新的狀態(tài),例如componentDidUpdate.


查看完整回答
反對(duì) 回復(fù) 2022-11-11
?
墨色風(fēng)雨

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

您也可以使用新的 ES2020 鏈運(yùn)算符來(lái)檢查對(duì)象中是否存在屬性,如下所示:


  render() {

    return (

  {this.state.team.map(team => (

    {team?.location ?<div><h1>{team.location.city}</h1></div>: null}

  ))}

  );        

  }


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

添加回答

舉報(bào)

0/150
提交
取消
微信客服

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

幫助反饋 APP下載

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

公眾號(hào)

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