大家。
我正在尝试迭代我在 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
答案 0 :(得分:1)
您没有将 Podcast
中的剧集传递给 EpisodesContainer
。
播客包含以下值。
{id, title, image_format, website}
您还需要从 Podcast
中的 podcast
传递剧集。