【问题标题】:Can't Render Data in React.js / Redux无法在 React.js / Redux 中呈现数据
【发布时间】:2021-07-28 01:55:12
【问题描述】:

每个人。

我正在尝试迭代我在 React/Redux 项目中提交的数据。但是,它是未定义的。该数据应呈现在其 Podcast 下方,因为这是他们的剧集。

import EpisodesContainer from '../containers/EpisodesContainer'
import { Link } from 'react-router-dom'

const Podcast = ({id, title, image_format, website, history}) => {

    // debugger 
    return (
        <div>
            <div key={id}>
                    <h2>{title}</h2>
                    <Link to={`/podcasts/${id}`}><img id={`podcast-${id}`} src={image_format ? image_format.url : process.env.PUBLIC_URL + '/public/noimage.jpeg'} width={300} height={300} alt={"podcast"} /></Link>
                    <p>{website}</p>
            </div>
            {(!!history && history.location.pathname === `/podcasts/${id}`) ? <EpisodesContainer podcast={{id, title, image_format, website}} /> : null}
        </div>
    );
};

export default Podcast;

这是剧集组件文件。

const Episodes = (props) => {
    // debugger 
    return (
        <div>
            {props.episodes && props.episodes.map(episode => 
                <div key={episode.id}>
                    <h3>{episode.name}</h3>
                    <iframe src={episode.spotify_link} width="100%" height="232" frameBorder="0" allowtransparency="true" allow="encrypted-media"></iframe>
                </div>     
            )}     
        </div>
    )     
}
        
export default Episodes

我在剧集容器中进行了调试,this.props.podcast.episode 返回未定义。对此有什么建议吗?同样,它们存储在后端和 Redux 中,但即使在控制台中也不会呈现。这是供参考的情节容器文件。

import React from 'react'
import EpisodeInput from '../components/EpisodeInput'
import Episodes from '../components/Episodes'

class EpisodesContainer extends React.Component {
    
    render() { 
        return (
            <div>
                < EpisodeInput />
                < Episodes episodes={this.props.podcast && this.props.podcast.episodes} />
            </div>
        )
    }
}

export default EpisodesContainer

【问题讨论】:

    标签: javascript reactjs redux render


    【解决方案1】:

    您没有将剧集从 Podcast 传递到 EpisodesContainer。 podcast 包含以下值。

    {id, title, image_format, website}
    

    您还需要通过Podcast 中的podcast 传递剧集。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2019-02-28
      • 2020-10-24
      • 2017-02-01
      • 2022-01-16
      • 1970-01-01
      • 2021-05-02
      相关资源
      最近更新 更多