Question

大家。

我正在尝试迭代我在 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 返回 undefined。对此有什么建议吗？同样，它们存储在后端和 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

Answer 1

您没有将 Podcast 中的剧集传递给 EpisodesContainer。播客包含以下值。

{id, title, image_format, website}

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

无法在 React.js / Redux 中渲染数据

1 个答案: