Reactjs 当组件渲染时，我得到'；无法读取属性'；参数'；

我头痛得厉害。。我不知道我做错了什么。当我的Podcast.js组件呈现时，我得到“无法读取未定义的属性”params…”

有人能给我指出正确的方向吗

这是播客的父组件：

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import NavLinks from './components/NavLinks';
import Home from './components/Home';
import Podcast from './components/Podcast';
import './App.css';

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
        <NavLinks />
          <Route exact path='/' component={Home} />
          <Route path='/podcast/:podID' component={Podcast} />
        </div>
      </Router>
    );
  }
}

export default App;

import React，{Component}来自'React'；
从“react Router dom”导入{BrowserRouter as Router，Route}；
从“./components/NavLinks”导入导航链接；
从“./components/Home”导入Home；
从“./components/Podcast”导入播客；
导入“/App.css”；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

这是我的主要组成部分（播客）：

import React，{Component}来自'React'；
从“/PodcastList”导入PodcastList；
类播客扩展组件{
建造师（道具）{
超级（道具）；
此.state={
播客：[]
};
}
//从props.match获取podID
fetchPodcast（）{
const-podd=this.props.match.params.podd
取回(`https://itunes.apple.com/search?term=podcast&country=${podd}&media=podcast&entity=podcast&limit=20`）
.then（response=>response.json（））
.then（data=>this.setState（{podcast:data.results}））；
}
组件安装（）{
this.fetchPodcast（）
}
//检查新道具是否与旧道具不同
componentDidUpdate（prevProps）{
//响应参数变化
设oldId=prevProps.match.params.podID
让newId=this.props.match.params.podd
如果（新ID！==旧ID）
this.fetchPodcast（）
}
render（）{
返回(
)
}
}
导出默认播客；

这是列出所有播客的组件：

import React, { Component } from 'react';

class PodcastList extends Component {
    render() {
        return (
            <div>
                <h2>Country ({this.props.match.params.podID}) </h2>
                <ul>
                {this.state.podcast.map(podcast =>
                    <li key={podcast.collectionId}>
                    <a
                    href={podcast.collectionId}>
                    {podcast.collectionName}</a>
                    </li>
                )}
                </ul>
            </div>
        )
    }
}

export default PodcastList;

import React，{Component}来自'React'；
类PodcastList扩展组件{
render（）{
返回(
国家（{this.props.match.params.podd}）

{this.state.podcast.map（podcast=>


)}

)
}
}
导出默认播客列表；

错误来自哪里？播客还是播客列表？可能是因为你没有把道具传给

PodcastList

尝试：

---

另外，在子组件（

PodcastList

）中，使用

this.props

而不是

this.state

我猜您使用的是

react router

。要使React路由器的

道具匹配

你必须通过模块的

withRouter

装饰器来装饰它

import React，{Component}来自'React'；
从“react router”导入{withRouter}；
类PodcastList扩展组件{
render（）{
返回(
国家（{this.props.match.params.podd}）

{this.state.podcast.map（podcast=>


)}

)
}
}
使用路由器导出默认值（播客列表）；

更新：

如何处理

podcast列表中的
podcast
道具的方法之一。这些解决方案适用于所有React建议和最佳实践

import React，{PureComponent}来自'React'；
从“./PodcastItem”导入PodcastItem；
类播客扩展了PureComponent{//PureComponent在这里是首选而不是组件
建造师（道具）{
超级（道具）；
此.state={
播客：[]
};
}
//从props.match获取podID
fetchPodcast（）{
const-podd=this.props.match.params.podd
取回(`https://itunes.apple.com/search?term=podcast&country=${podd}&media=podcast&entity=podcast&limit=20`）
.then（response=>response.json（））
.then（data=>this.setState（{podcast:data.results}））；
}
组件安装（）{
this.fetchPodcast（）
}
//检查新道具是否与旧道具不同
componentDidUpdate（prevProps）{
//响应参数变化
设oldId=prevProps.match.params.podID
让newId=this.props.match.params.podd
如果（新ID！==旧ID）
this.fetchPodcast（）
}
render（）{
返回(
国家（{this.props.match.params.podd}）

{this.state.podcast.map（podcast=>(
播客={podcast}/>
))}

)
}
}
导出默认播客；

从“React”导入React；
//在这里，无状态函数就足够了
const PodcastItem=（{podcast}）=>(


);
导出默认项目；
根据该错误，我猜测没有提供
this.props.match
。介意为
Podcast
共享父组件吗？您可以在接收道具的位置共享父组件代码吗？我现在在问题中添加了父组件代码：）它来自Podcast.js。尝试使用您给出的答案，但我得到：TypeError:无法读取null的属性“podcast”。用父组件更新了我的问题。@JonasAlvarson尝试新答案。如您所见，错误消息已更改，这表明第一个问题已由此解决。第二个问题（以及第一个问题）来自
PodcastList
，而不是
Podcast
。您试图使用来自其父组件的状态和道具，而不传递它们。。此外，状态被作为道具传递，而不是作为解决问题的状态传递。非常感谢你。你认为这是划分组件的好方法吗？我的意思是，有一个较小的组件来处理列表的呈现？如果没有，你能指出一个更正确的方法吗？没问题。嗯，是的，这似乎是一个正确的解决办法。（虽然可能是美国
import React, { Component } from 'react';

class PodcastList extends Component {
    render() {
        return (
            <div>
                <h2>Country ({this.props.match.params.podID}) </h2>
                <ul>
                {this.state.podcast.map(podcast =>
                    <li key={podcast.collectionId}>
                    <a
                    href={podcast.collectionId}>
                    {podcast.collectionName}</a>
                    </li>
                )}
                </ul>
            </div>
        )
    }
}

export default PodcastList;

<PodcastList {...this.props} {...this.state} />