Question

React-无法读取未定义的属性“params”

2020-03-08

4296

reactjs routes

我在 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;

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

Unhandled Rejection (TypeError): Cannot read property 'params' of undefined

Answer 1

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

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

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

FWIW do

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

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

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