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

【问题标题】：Cannot read property 'params' of undefined, React无法读取未定义的属性“参数”，React
【发布时间】：2019-05-19 07:40:46
【问题描述】：

我有一个问题，我以正确的方式通过props (IMO)，但我仍然有这个错误：

我的 App.js 中有这些代码行

这个正在工作：

           <Route path="/users/:username" 
               render={(props) => <Profile  isAuthenticated={this.state.isAuthenticated} currentUser={this.state.currentUser} {...props} />}>
           </Route>

但是这个不起作用，在渲染“Ride”时出现错误

        <Route path="/ride/:username" 
          render={(props) => <Ride  isAuthenticated={this.state.isAuthenticated} currentUser={this.state.currentUser} {...props} />}>
        </Route>

错误：类型错误：无法读取未定义的属性“参数”

  43 |    }
  44 |      
  45 |    componentDidMount() {
> 46 |        const username = this.props.match.params.username;
  47 | ^      this.loadUserProfile(username);
  48 |    }
  49 |

即使代码在内部（组件），它们也是一样的......

【问题讨论】：

检查你的 props，错误提示 match 没有 params 属性，请问console.log(this.props) 你得到了什么？

标签： reactjs react-router

【解决方案1】：

您可以尝试的另一种选择是使用 React 开发人员工具（如果您还没有的话）并查看道具的外观。我上面的用户也建议将其记录在控制台中，这也可以帮助我们找出问题所在。现在，在应用程序当前状态下，它无法读取属性“匹配”。

如果我没看错的话，没有称为“匹配”的道具被传递给您的组件？

【讨论】：

他在使用react-router，URL中提供的用户名应该自动发送到this.props.match.params.username
i.gyazo.com/aa84d5302bb3bee44fecb58da8575f71.png 你可以看到它通过了我想要的一切...... :(
可以在componentDidMount开头加个条件吗？ if(this.props.match.params.username) { } 如果抛出错误，你可以这样做 if(typeof this.props.match.params.username !== 'undefined')
仍然出现错误，同样的... idk 出了什么问题github.com/krukarkonrad/problem 也许检查代码

【解决方案2】：

我正在为您当前的问题提供解决方案，但根据您的目的，您可能希望稍微更改代码。您正在为您的 Ride 组件获得 undefined，因为它有一个额外的渲染。这里：

.....
    <div style={{ display: "flex", justifyContent: "center" }}>
        <h6>Made by Konrad Krukar</h6>
    </div>
    <Ride />   <-------- SEE
</Layout>
....

这是在您的 App 组件中。由于它没有被 Router 包裹，因此您无法获得所需的道具。我不知道渲染它的目的是什么，但你可以使用withRouter 也许。

【讨论】：

羞辱我，所以fkn愚蠢的错误，谢谢你:-|它是用于测试（以前制作简单应用程序的方式，现在我正在以其他方式进行），我忘了删除它
没问题。我们都会犯这种错误:) 如果我的回答对你来说没问题，请考虑接受它。如果没有，您可以用适当的解决方案回答您自己的问题，然后再接受。

【解决方案3】：

在某些情况下，检查您是否在 withRouter 中包装了组件

redux 示例

export default withRouter(
  connect(
    mapStateToProps,
    mapDispatchToProps
  )(ComponentName)
);

或者只是一个功能组件

export default withRouter(ComponentName);

【讨论】：