Javascript React不会在贴图函数中渲染元素

我试图从贴图函数渲染元素，但它似乎不起作用。我试图改变回报，但似乎没有任何效果

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>;
  }
}

将项目存储在状态中，并使用api响应进行更新。这将导致您的组件重新加载

另外，将api调用移动到组件挂钩

componentDidMount(){
  Api.getMyTopArtists(function (err, data) {
      this.setState({
           items: data.items
       })
   }

将项目存储在状态中，并使用api响应进行更新。这将导致您的组件重新加载

另外，将api调用移动到组件挂钩

componentDidMount(){
  Api.getMyTopArtists(function (err, data) {
      this.setState({
           items: data.items
       })
   }

---

这不起作用，因为您正在从回调返回数据，而需要使用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>
    )
  }
}

---

这不起作用，因为您正在从回调返回数据，而需要使用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>
    )
  }
}

---

只是一个如何用钩子和功能组件以另一种方式实现的想法。正如其他人已经提到的，代码中的主要问题是回调不会返回结果，也不会将结果设置为状态

常数MyTop10Artists==>{ const[artists，setArtists]=useState[]； const[isLoading，setIsLoading]=useStatetrue； const[error，setError]=useState； useEffect=>{ Api.getMyTopArtistserr，数据=>{ 如果出错{ console.error； setErrorerr； 回来 } setArtistsdata.items； setIsLoadingfalse； }; }, []; 回来 {isLoading&&Loading} {error&&error} {！isLoading&&Artisters.length==0&&No Artisters} {！正在加载&& artists.mapartist=> {艺术家名称} } ; }; 常量API==> ;

---

只是一个如何用钩子和功能组件以另一种方式实现的想法。正如其他人已经提到的，代码中的主要问题是回调不会返回结果，也不会将结果设置为状态

常数MyTop10Artists==>{ const[artists，setArtists]=useState[]； const[isLoading，setIsLoading]=useStatetrue； const[error，setError]=useState； useEffect=>{ Api.getMyTopArtistserr，数据=>{ 如果出错{ console.error； setErrorerr； 回来 } setArtistsdata.items； setIsLoadingfalse； }; }, []; 回来 {isLoading&&Loading} {error&&error} {！isLoading&&Artisters.length==0&&No Artisters} {！正在加载&& artists.mapartist=> {艺术家名称} } ; }; 常量API==> ;

---

只需返回api调用？就要说相同的，或者使用状态。顺便说一句，我会在渲染部分移动整个贴图或将其提取到它自己的组件中，该类上的函数进入渲染函数感觉像是一个反模式API调用很可能是异步的，但重点仍然是myTop10Artists不会返回任何内容，因此，您不应该期望它会这样做。我鼓励您对从Api.getMyTopArtists返回的数据使用state。由于它是一个异步函数，难怪没有任何东西可以用你的代码呈现。@Wishal看一下我关于使用自己的组件的回答，我没有得到更多数据的参数，因此函数的使用只是返回api调用？将要说同样的话，或者使用状态。顺便说一句，我会在渲染部分移动整个贴图或将其提取到它自己的组件中，该类上的函数进入渲染函数感觉像是一个反模式API调用很可能是异步的，但重点仍然是myTop10Artists不会返回任何内容，因此，您不应该期望它会这样做。我鼓励您对从Api.getMyTopArtists返回的数据使用state。由于它是一个异步函数，难怪没有任何东西可以用你的代码呈现。@Wishal看看我关于使用自己的组件的回答，我没有得到更多数据的参数，因此使用一个函数就是如何在react中获取数据，以实现状态视图心智模型。您有一个初始状态，更新此状态，然后显示它。此外，您可能希望更轻松地尝试使用React钩子。在使用此钩子之前，您应该调用superprops。superprops应该位于顶部，制作一个编辑器。这就是您在React中获取数据的方式，以实现状态视图心智模型。您有一个初始状态，更新此状态，然后显示它。另外，您可能想更轻松地尝试使用React钩子。在使用之前，您应该调用superprops。superprops应该位于顶部，进行编辑