为了账号安全,请及时绑定邮箱和手机立即绑定

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个赞

只是关于如何使用钩子和功能组件以另一种方式处理这个问题的想法。正如其他人已经提到的,代码中的主要问题是回调未返回结果或设置为状态。


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状态并使用 api 响应更新它。这将导致您的组件重新渲染。


另外,将您的 api 调用移至组件挂钩


componentDidMount(){

  Api.getMyTopArtists(function (err, data) {

      this.setState({

           items: data.items

       })

   }


查看完整回答
反对 回复 2023-08-24
?
翻阅古今

TA贡献1780条经验 获得超5个赞

这是行不通的,因为您是从回调返回数据,而是需要将this.setState()获取的数据存储到您的状态中,然后显示它。


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条经验 获得超13个赞

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 关注
  • 137 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信