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

Question

我正在嘗試從 map 函數中渲染元素，但它似乎不起作用。 我試圖改變回報，但似乎沒有任何效果。

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

Answer 1

將items存儲在狀態中並使用 api 響應對其進行更新。 這將導致您的組件重新渲染。

此外，將您的 api 調用移動到組件掛鈎

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

Answer 2

這不起作用，因為您是從回調中返回數據，而是需要使用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>
    )
  }
}

Answer 3

只是關於如何使用鈎子和功能組件以另一種方式解決此問題的想法。 正如其他人已經提到的那樣，您的代碼中的主要問題是回調沒有返回結果或設置為狀態。

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

Answer 4

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