如何在 React 中使用“this.props.params”？答案

【问题标题】：How to use 'this.props.params' in React?如何在 React 中使用“this.props.params”？
【发布时间】：2018-10-17 08:33:17
【问题描述】：

我将某个 id (idValue) 发送到我的组件并像这样使用它：

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

但有时这个组件在没有任何输入参数（没有 idValue）的情况下打开，我得到了这个错误：

TypeError: Cannot read property 'idValue' of undefined

我该如何解决？

我尝试过使用typeof，但没有成功

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

【问题讨论】：

【解决方案1】：

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

我该如何解决？

这取决于如果没有params.idValue，你是否要调用this.onHandleFetch。

如果您不这样做，请使用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。

【讨论】：

【解决方案2】：

static defaultProps = {
    params:{}
}

【讨论】：

【解决方案3】：

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

MyComponent.defaultProps = {
  params: {}
};

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

在这种情况下，您只需检查 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);
}

【讨论】：