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

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

React 不會渲染地圖函數中的元素

React 不會渲染地圖函數中的元素

慕蓋茨4494581 2023-08-24 18:21:16
我正在嘗試從地圖函數渲染元素，但它似乎不起作用。我嘗試過更改退貨，但似乎沒有效果。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貢獻1963條經驗 獲得超6個贊

只是關于如何使用鉤子和功能組件以另一種方式處理這個問題的想法。正如其他人已經提到的，代碼中的主要問題是回調未返回結果或設置為狀態(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>

);


查看完整回答
反對 回復 2023-08-24
?
回首憶惘然

TA貢獻1847條經驗 獲得超11個贊

存儲items狀態(tài)并使用 api 響應更新它。這將導致您的組件重新渲染。


另外，將您的 api 調用移至組件掛鉤


componentDidMount(){

  Api.getMyTopArtists(function (err, data) {

      this.setState({

           items: data.items

       })

   }


查看完整回答
反對 回復 2023-08-24
?
翻閱古今

TA貢獻1780條經驗 獲得超5個贊

這是行不通的，因為您是從回調返回數據，而是需要將this.setState()獲取的數據存儲到您的狀態(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>

    )

  }

}


查看完整回答
反對 回復 2023-08-24
?
翻翻過去那場雪

TA貢獻2065條經驗 獲得超14個贊

1-在返回值中使用映射函數

2-使用圓括號而不是大括號來包圍箭頭函數


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

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

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

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

              </div>{" "}

            </div>

       ))};

);

       


查看完整回答
反對 回復 2023-08-24
  • 4 回答
  • 0 關注
  • 255 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

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

 公眾號

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