Question

无法读取未定义的属性‘params’，React

2018-12-18

8472

reactjs react-router

我遇到了一个问题，我以正确的方式传递了 props （在我看来），但仍然出现错误：

我的 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>

错误： TypeError：无法读取未定义的属性“params”

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

即使代码在（组件）内部，它们也是相同的……

Answer 1

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

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

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

Answer 2

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

使用 redux 的示例

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

或者只是一个功能组件

export default withRouter(ComponentName);

Answer 3

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

如果我没有看错的话，没有名为“match”的 prop 被传递给您的组件？