Question

我在根据PodcastList组件中的props.catergory值和设置状态确定如何设置数据获取位置的结构上遇到问题

我可以在父组件（Home.js）中获取数据，设置状态并将状态作为prop传递。但是API端点需要输入categoryId，我无法一次获取所有播客。这就是为什么我制作了一个接收和categoryId的子组件。像这样：

<PodcastList category='1301' />

我的强项是在将this.props.category传递给api端点的子组件中进行提取。（我完全不知道自己在做什么）

有人可以帮助解释如何完成我想要的吗？

我的代码如下：

Home.js组件：

import React, { Component } from 'react'
import { fetchPopularPodcasts } from './api'
import PodcastList from './PodcastList'

export default class Home extends Component {
  render() {
    return (
      <div className='container'>
        <PodcastList category='1301' /> // Lists all Podcasts from category: Arts
        <PodcastList category='1303' /> // Lists all Podcasts from category: Comedy
        <PodcastList category='1304' /> // Lists all Podcasts from category: Educationrts
        <PodcastList category='1305' /> // Lists all Podcasts from category: Kids & Family
      </div>
    );
  }

PodcastList.js组件

import React from 'react'
import { fetchPodcastCategory } from './api'

export default class PodcastList extends Component {

    state = {
    podcasts: [],
    loading: true,
  }

  async componentDidMount () {
    const podcasts = await fetchPodcastCategory(this.props.categoryId);
      this.setState({
            podcasts,
            loading: false,
        })
  }

    render() {
        return (
            <div className='row'>
                <div className='col-md-12'>
                {category.map((pod) => {
                  return (
                            <div className='pod-box'>
                                {pod.Title}
                                {pod.Label}
                            </div>
                )
                })}
                </div>
            </div>
      )
    }
}


export default PodcastList;

Api.js

import Feed from 'feed-to-json-promise'

export async function fetchPopularPodcasts () {
  const response = await fetch('https://itunes.apple.com/search?term=podcast&country=se&media=podcast&entity=podcast&limit=200')
  const podcasts = await response.json()

  return podcasts.results
}

export async function fetchPodcastCategory (categoryId) {
  const response = await fetch(`https://itunes.apple.com/se/rss/toppodcasts/limit=100/genre=${categoryId}/explicit=true/json`)
  const podcasts = await response.json()

  return podcasts.feed
}

export async function fetchPodcast (podId) {
  const response = await fetch(`https://itunes.apple.com/lookup?id=${podId}&country=se`)
  const podcasts = await response.json()

  return podcasts.results
}

export async function fetchPodcastEpisodes (feedUrl) {
  const feed = new Feed()
  const episodes = await feed.load(feedUrl)

  return episodes
}

Answer 1

我会在podcastlist组件中执行此操作，如果要将数据返回到父组件，则可以运行回调，

将功能提供给播客列表作为道具并像这样运行该功能，

const podcasts =等待fetchPodcastCategory（this.props.categoryId）; this.setState（{ 播客加载：false， }，this.props.callback（播客） }

Answer 2

我不认为您的设计太糟糕了。

基本上可以更改

 {category.map((pod) => {

使用

 {this.state.podcasts.map((pod) => {

此代码应该可以工作。

您到底想实现什么目标？为什么该体系结构不为您完成？如果您对此进行澄清，则可以获得更好的答案。

根据组件属性从API提取数据

2 个答案: