Как использовать this.props.params в React?

Question

Я посылаю определенный идентификатор (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

Добавьте соответствующие реквизиты по умолчанию к компоненту, в котором вы пытаетесь получить доступ к параметрам, например,

MyComponent.defaultProps = {
  params: {}
};

Это будет означать, что при попытке доступа к параметрам из componentDidMount(), this.props.params не будет пустымесли вы не передали объект для параметров, как, например, при использовании компонента.

1. с параметрами <MyComponent params={{ idValue: 1 }} /> будет использовать переданные здесь параметры.
2. без параметров <MyComponent /> будетотступление к defaultProps, описанному выше.

В этом случае вам нужно будет только проверить наличие идентификатора, чтобы убедиться, что ваш компонент выполняет выборку только в том случае, если в параметрах определено idValue.

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

В качестве альтернативы вы можете передать значение по умолчанию, если idValue не определено, например,

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

Answer 3

static defaultProps = {
    params:{}
}