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

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

React 不會(huì)渲染地圖函數(shù)中的元素

React 不會(huì)渲染地圖函數(shù)中的元素

慕蓋茨4494581 2023-08-24 18:21:16
我正在嘗試從地圖函數(shù)渲染元素，但它似乎不起作用。我嘗試過(guò)更改退貨，但似乎沒(méi)有效果。class API extends Component {  myTop10Artists() {    Api.getMyTopArtists(function (err, data) {      if (err) {        console.error(err);      } else {        console.log(data.items);        return data.items.map((artist) => {          console.log("artist name " + artist.name);          console.log("artist id " + artist.id);          console.log("artist popularity " + artist.popularity);          return (            <div key={artist.id} className="card">              <div key={artist.id} className="cardContent">                <h3> {artist.name} </h3>{" "}              </div>{" "}            </div>          );        });      }    });  }  render() {    return <div className="cardsWrap"> {this.myTop10Artists()} </div>;  }}
查看完整描述

4 回答

?
神不在的星期二

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

只是關(guān)于如何使用鉤子和功能組件以另一種方式處理這個(gè)問(wèn)題的想法。正如其他人已經(jīng)提到的，代碼中的主要問(wèn)題是回調(diào)未返回結(jié)果或設(shè)置為狀態(tài)。


const MyTop10Artists = () => {

  const [artists, setArtists] = useState([]);

  const [isLoading, setIsLoading] = useState(true);

  const [error, setError] = useState();


  useEffect(() => {

    Api.getMyTopArtists((err, data) => {

      if (err) {

        console.error(err);

        setError(err);

        return;

      }

      setArtists(data.items);

      setIsLoading(false);

    });

  }, []);


  return (

    <>

      {isLoading && "Loading"}

      {error && error}

      {!isLoading && artists.length === 0 && "No artists"}

      {!isLoading &&

        artists.map((artist) => (

          <div key={artist.id} className="card">

            <div key={artist.id} className="cardContent">

              <h3>{artist.name}</h3>

            </div>

          </div>

        ))}

    </>

  );

};


const API = () => (

  <div className="cardsWrap">

    <MyTop10Artists />

  </div>

);


查看完整回答
反對(duì) 回復(fù) 2023-08-24
?
回首憶惘然

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

存儲(chǔ)items狀態(tài)并使用 api 響應(yīng)更新它。這將導(dǎo)致您的組件重新渲染。


另外，將您的 api 調(diào)用移至組件掛鉤


componentDidMount(){

  Api.getMyTopArtists(function (err, data) {

      this.setState({

           items: data.items

       })

   }


查看完整回答
反對(duì) 回復(fù) 2023-08-24
?
翻閱古今

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

這是行不通的，因?yàn)槟菑幕卣{(diào)返回?cái)?shù)據(jù)，而是需要將this.setState()獲取的數(shù)據(jù)存儲(chǔ)到您的狀態(tài)中，然后顯示它。


class API extends Component {

  constructor(props){

    super(props);

    this.state = {

      data: null,

      error: null

    }

    this.myTop10Artists = this.myTop10Artists.bind(this);

  }

  

  componentDidMount(){

    this.myTop10Artists();

  }

  

  myTop10Artists() {

    Api.getMyTopArtists(function (err, data) {

      if (err) {

        this.setState({...this.state, error: err});

      } else {

        this.setState({error: null, data})

      }

    });

  }

  

  render() {

    const {error, data} = this.state;

    if(error){

      return <div>Error! Try again</div>

    }

    

    if(!data){

      return <div>Loading..</div>

    }

    

    return (

      <div>

         data.items.map((artist) => (

            <div key={artist.id} className="card">

              <div key={artist.id} className="cardContent">

                <h3> {artist.name} </h3>{" "}

              </div>{" "}

            </div>

        ))

      </div>

    )

  }

}


查看完整回答
反對(duì) 回復(fù) 2023-08-24
?
翻翻過(guò)去那場(chǎng)雪

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

1-在返回值中使用映射函數(shù)

2-使用圓括號(hào)而不是大括號(hào)來(lái)包圍箭頭函數(shù)


return ({data.items.map((artist) => (

            <div key={artist.id} className="card">

              <div key={artist.id} className="cardContent">

                <h3> {artist.name} </h3>{" "}

              </div>{" "}

            </div>

       ))};

);

       


查看完整回答
反對(duì) 回復(fù) 2023-08-24
  • 4 回答
  • 0 關(guān)注
  • 280 瀏覽
慕課專(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)