Можно ли использовать условный рендеринг компонента React, когда переменная не определена?

Question

В моем проекте электронной коммерции есть компонент ProductPage, который отображает информацию о продукте, такую ​​как цена, цвет, размер и т. Д. c.

Компонент получает идентификатор продукта из URL (например, store.com/). продукт / 123456" ). Затем, используя такой идентификатор продукта, информация о продукте извлекается из API-интерфейса graphql и устанавливается в переменной состояния «product».

Проблема возникает, когда пользователь вводит URL-адрес, который содержит несуществующий идентификатор продукта; в этом случае API не получает никаких данных, поэтому переменная продукта не определена, и в браузере отображается ошибка «продукт не определен».

В этих случаях возможно ли использовать условный рендеринг для отображения сообщения об ошибке или перенаправление на страницу 404?

Обновление:

Я использую функциональные компоненты.

Answer 1

Вы можете использовать условный рендеринг для отображения либо страницы продукта, либо страницы 404.

В ComponentDidMount вы выбираете данные и устанавливаете их в состояние, а при наличии ошибки вы устанавливаете ошибку в состояние

* 1004. * Во время рендеринга, если присутствует ошибка, отобразите компонент CustomErrPage, в противном случае отобразите компонент Productpage

Например

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      err: null
    }
  }

  componentDidMount() {
    axios.get('store.com/product/123456')
    .then(res => this.setState({
      data: res.data
    }))
    .catch(err => this.state({
      err: err }))
  }

  render() {
    return (
      <div>
        {this.state.err ? <CustomErrPage /> : <ProductPage data={this.state.data} /> }
      </div>
    )
  }
}

Answer 2

Чтобы использовать условный рендеринг для отображения сообщения об ошибке 404, когда введенный идентификатор равен false, вы можете создать компонент страницы 404 с маршрутом и проверить, чтобы, когда идентификатор не был распознан, он перенаправлял на страницу 404:

  const validId = parseInt(props.match.params.id);
  if (!validId){
    return <Redirect to="/404"/>;
  }