Question

我正在尝试映射数组以获取特定值并将其输出到我的PodcastList组件中。

我的json（红色下划线是我想在PodcastList.js中查看的内容） https://itunes.apple.com/se/rss/toppodcasts/limit=100/genre=1314/explicit=true/json 这是我的主页组件：

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

export default class Home extends Component {

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

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

  render() {
    const { podcasts } = this.state

    return (
      <div className='container'>
                        <PodcastList list={podcasts} />
      </div>
    );
  }
}

这是我的PodcastList组件

import React from 'react'
import { Link } from 'react-router-dom'
import slugify from 'slugify'

const PodcastList = ({ list }) => {
  return (
        <div className='col-md-12'>
        {list.map((pod) => {
          return (
                    <div className='pod-box'>
            GET THE LABEL?????
                    </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/se/rss/toppodcasts/limit=100/genre=1314/explicit=true/json')
  const podcasts = await response.json()
  return podcasts.feed.entry
}

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

要获取包含每个数组项对象的label属性的数组，可以使用Array的map方法：

let list = [ /* the contents included in your screenshot */ ]

let newList = list.map(pod => { 
    return pod['im:artist'].attributes.label 
})

请注意，由于格式“ im：artist”的属性（即带有冒号）的格式，您需要使用bracket notation对其进行访问。

此外，使用检查器确保列表实际上是一个数组。

最后，针对您在PodcastList中的情况：

const PodcastList = ({ list }) => {
    return (
        <div className='col-md-12'>
            {
                list.map(pod => {
                    return (
                        <div className='pod-box'>
                            pod['im:artist'].attributes.label 
                        </div>
                    )
                 })
            }
        </div>
    )
}

这假设您的所有React-ness是正确的，因为在该领域中，我并不熟悉。（如果仍然无法使用，我会调查您最里面的div是否需要大括号。）

另外，在重新评估代码时，您可能宁愿使用forEach，因为您并不是真正在尝试创建映射数组；相反，您正在尝试访问每个数组元素的属性。

Answer 2

您的子组件将以与组件相同的方式设置

import React from 'react'
import { Link } from 'react-router-dom'
import slugify from 'slugify'

const default class PodcastList extends Component {

  _renderList = () => {
    let elem = this.props.list && this.props.list.length > 0
      (this.props.list.map((pod) => {
        <div className='pod-box'>{pod}</div>;
      )});
    return elem;
  }

  render() {
    return (
       <div className='col-md-12'>
        {this._renderList()}
       </div>
    )
  }

导出默认PodcastList；

映射数组以获取特定值

2 个答案: