如何在React中使用'this.props.params'？

Question

我向我的组件发送一个特定的id（idValue），并像这样使用它：

componentDidMount() {
    this.onHandleFetch(this.props.params.idValue);
  }

但是有时候这个组件打开时没有任何输入参数（没有idValue），我得到了这个错误：

TypeError: Cannot read property 'idValue' of undefined

我该如何解决？

我尝试使用 typeof ，但未成功

在传输值的组件中，我使用上下文路由器

Answer 1

该错误告诉我们，this.props.params有时是undefined（可能是因为根本没有将params传递给组件）。

  

我该如何解决？

如果没有this.onHandleFetch，这取决于您是否要呼叫params.idValue。

如果不这样做，请使用if：

componentDidMount() {
  if (this.props.params && this.props.params.idValue) {
    this.onHandleFetch(this.props.params.idValue);
  }
}

如果这样做，则提供一些替换值，然后：

componentDidMount() {
  this.onHandleFetch((this.props.params && this.props.params.idValue) || replacementValue);
}

这两个假设idValue不会是0。

Answer 2

static defaultProps = {
    params:{}
}

Answer 3

在尝试访问参数的组件中添加适当的默认道具，例如

MyComponent.defaultProps = {
  params: {}
};

这意味着，当您尝试从componentDidMount()访问参数时，如果没有像使用该组件那样将参数传递给对象，则this.props.params不会为空。

1. 带有参数<MyComponent params={{ idValue: 1 }} />的参数将使用此处传递的参数。
2. 没有参数<MyComponent />的版本将退回到上面的defaultProps。

在这种情况下，您只需要检查ID的存在即可确保只有在参数中定义了idValue时组件才能进行提取。

componentDidMount() {
    const { params } = this.props;
    if (params.idValue)
        this.onHandleFetch(params.idValue);
    }
}

或者，如果未定义idValue，则可以传递默认值。

componentDidMount() {
    const { params } = this.props;
    this.onHandleFetch(params.idValue || -1);
}