React 不会渲染地图函数中的元素

Question

我正在尝试从地图函数渲染元素，但它似乎不起作用。我尝试过更改退货，但似乎没有效果。

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

只是关于如何使用钩子和功能组件以另一种方式处理这个问题的想法。正如其他人已经提到的，代码中的主要问题是回调未返回结果或设置为状态。const MyTop10Artists = () => {&nbsp; const [artists, setArtists] = useState([]);&nbsp; const [isLoading, setIsLoading] = useState(true);&nbsp; const [error, setError] = useState();&nbsp; useEffect(() => {&nbsp; &nbsp; Api.getMyTopArtists((err, data) => {&nbsp; &nbsp; &nbsp; if (err) {&nbsp; &nbsp; &nbsp; &nbsp; console.error(err);&nbsp; &nbsp; &nbsp; &nbsp; setError(err);&nbsp; &nbsp; &nbsp; &nbsp; return;&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; setArtists(data.items);&nbsp; &nbsp; &nbsp; setIsLoading(false);&nbsp; &nbsp; });&nbsp; }, []);&nbsp; return (&nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; {isLoading && "Loading"}&nbsp; &nbsp; &nbsp; {error && error}&nbsp; &nbsp; &nbsp; {!isLoading && artists.length === 0 && "No artists"}&nbsp; &nbsp; &nbsp; {!isLoading &&&nbsp; &nbsp; &nbsp; &nbsp; artists.map((artist) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div key={artist.id} className="card">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div key={artist.id} className="cardContent">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3>{artist.name}</h3>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; </>&nbsp; );};const API = () => (&nbsp; <div className="cardsWrap">&nbsp; &nbsp; <MyTop10Artists />&nbsp; </div>);

Answer 2

存储items状态并使用 api 响应更新它。这将导致您的组件重新渲染。另外，将您的 api 调用移至组件挂钩componentDidMount(){&nbsp; Api.getMyTopArtists(function (err, data) {&nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;items: data.items&nbsp; &nbsp; &nbsp; &nbsp;})&nbsp; &nbsp;}

Answer 3

这是行不通的，因为您是从回调返回数据，而是需要将this.setState()获取的数据存储到您的状态中，然后显示它。class API extends Component {&nbsp; constructor(props){&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; data: null,&nbsp; &nbsp; &nbsp; error: null&nbsp; &nbsp; }&nbsp; &nbsp; this.myTop10Artists = this.myTop10Artists.bind(this);&nbsp; }&nbsp;&nbsp;&nbsp; componentDidMount(){&nbsp; &nbsp; this.myTop10Artists();&nbsp; }&nbsp;&nbsp;&nbsp; myTop10Artists() {&nbsp; &nbsp; Api.getMyTopArtists(function (err, data) {&nbsp; &nbsp; &nbsp; if (err) {&nbsp; &nbsp; &nbsp; &nbsp; this.setState({...this.state, error: err});&nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; this.setState({error: null, data})&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; }&nbsp;&nbsp;&nbsp; render() {&nbsp; &nbsp; const {error, data} = this.state;&nbsp; &nbsp; if(error){&nbsp; &nbsp; &nbsp; return <div>Error! Try again</div>&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; if(!data){&nbsp; &nbsp; &nbsp; return <div>Loading..</div>&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;data.items.map((artist) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div key={artist.id} className="card">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div key={artist.id} className="cardContent">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3> {artist.name} </h3>{" "}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>{" "}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; ))&nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; )&nbsp; }}

Answer 4

1-在返回值中使用映射函数2-使用圆括号而不是大括号来包围箭头函数return ({data.items.map((artist) => (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div key={artist.id} className="card">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div key={artist.id} className="cardContent">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <h3> {artist.name} </h3>{" "}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>{" "}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp;))};);&nbsp; &nbsp; &nbsp; &nbsp;