React - 无法读取未定义的属性“参数”答案

【问题标题】：React - Cannot Read Property 'params' Of UndefinedReact - 无法读取未定义的属性“参数”
【发布时间】：2020-06-20 21:23:03
【问题描述】：

我在 Route 中设置了参数。它们从我的组件出现在控制台中，但我收到“未定义”错误。

<Router>
    <App>
        <Switch>
                <Route exact path='/data/:param' component={data} />
        </Switch>         
    </App>
</Router>

组件

class Data extends Component {
    constructor(props) {
        super(props);

    async componentDidMount() {
        console.log(this.props.match.params.param)

    ...

export default Data;

如果我可以在控制台中看到它们，为什么我仍然会收到错误消息？

未处理的拒绝（TypeError）：无法读取未定义的属性“参数”

【问题讨论】：

您能否将export 行包含在Data 中？
我添加进去了，只是默认导出
你为什么不使用Router(Data)？
你说它记录得很好，那么错误到底发生在哪里？
withRouter 是一个 HOC，它将路由 props 注入到您的组件中。在访问 this.props.match... 之类的道具之前，您将需要这些

标签： reactjs routes

【解决方案1】：

您需要确保您的导入对于Route 是正确的，即Data。

import Data from './Data';
...
     <Route exact path='/data/:param' component={Data} />
...

您不需要用 withRouter 高阶组件包装组件，因为您的组件 Data 已经是 Route 的子组件。

FWIW 做

componentDidMount() {
  console.log(this.props.match && this.props.match.params.param);
}

另外，您在执行componentDidMount() 时可能不需要async。这也可能是您需要添加上述防御代码的原因。

PS：console.log() 可以显示评估数据，通常在对象 eval 旁边用 i 表示。

【讨论】：

感谢您的回答。由于fetch，我正在使用异步。我发布了我的错误图片。我相信我正确地导入了
我看到了你的图片。你试过防御代码吗？因此，您需要检查防御代码，无论您试图在this.props.match 中找到任何内容，因为匹配尚未生效。检查哪个是：this.props.match && this.props.match.params.param
我对防御性代码不熟悉。什么意思？
在你的 componentDidMount:this.props.match && this.props.match.params.param 中使用它，这样当匹配未定义时你不会收到错误 - 因为匹配还不可用并且函数是异步的。
恭喜！由于在这种情况下生命周期方法componentDidMount() 是async，我的猜测是当props.match 尚不可用时，您会看到中间状态。更好的方法是调用componentDidMount() 内部的fetch()，方法是从此处删除async/await，并在fetch() 中的数据使用另一个生命周期之后更新您的组件称为componentDidUpdate() 的方法。这意味着一个额外的 render() 但它会确保你看不到中间状态。