映射数组以获取特定值答案

【问题标题】：Map array to get specific value映射数组以获取特定值
【发布时间】：2018-09-25 20:07:21
【问题描述】：

我试图映射一个数组以获取特定值并将其输出到我的 PodcastList 组件中。

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

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
}

【问题讨论】：

您是否只是想获取 label 属性中的值数组？或者你希望你的输出具体是什么样的？
不，这张图片对理解没有帮助。
“映射通过”是什么意思？
如果你能创建一个Minimal, Complete, and Verifiable example，那会很有帮助。
假设您的数据都符合相同的结构，您可以使用data.map(elem => elem["im:artist"].attributes.label)，其中elem 是每个外部对象，["im:artist"].attributes.label 是您正在查找的值的固定路径对于每个对象

标签： javascript reactjs

【解决方案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>
    )
}

这假设你所有的反应都是正确的，因为在那个领域，我不熟悉。（如果它仍然不起作用，我会调查您是否需要在最里面的 div 中使用花括号。）

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

【讨论】：

现在我明白了！谢谢！ :-) 在我的 json 中，属性 im:image 包含一个数组吗？我怎样才能访问它？
@JonasAlvarson 你会去：pod['im:image'][index]，其中 index 是一个代表数组中位置的数字。

【解决方案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；

【讨论】：