Неопределенное значение реквизита в дочернем компоненте

Question

Я пытаюсь прочитать элемент массива в дочернем компоненте с помощью реквизита. Регистрация массива в дочернем компоненте работает. Но если я пытаюсь получить доступ к свойству одного из элементов массива, индексируя его с помощью: id из match.params, это говорит мне, что я не могу получить доступ к свойству undefined.

Любое руководство будет с благодарностью.

tours.js

import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";

// Page Imports
import Summary from "../pages/summary";
import Details from "../pages/details";

// Component Imports
import Homebutton from "../components/homebutton";

class Tours extends Component {
  state = {
    tours: []
  };

  componentDidMount() {
    window.scrollTo(0, 0);
    fetch("/tours")
      .then(res => res.json())
      .then(res => this.setState({ tours: res }));
  }

  render() {
    const tours = this.state.tours;

    return (
      <section className="tours-page">
        <div className="center-box">
          <h2>Tours</h2>
        </div>
        <Switch>
          <Route
            exact
            path={this.props.match.url}
            render={props => <Summary {...props} tours={tours} />}
          />
          <Route
            path={this.props.match.url + "/:id"}
            render={props => <Details {...props} tours={tours} />}
          />
        </Switch>
        <Homebutton />
      </section>
    );
  }
}

export default Tours;

details.js

import React from "react";

const Details = ({
  tours,
  match: {
    params: { id }
  }
}) => (
  <section className="details">
    <h2>{tours[id]["name"]}</h2>
  </section>
);

export default Details;

Answer 1

Чтобы быть уверенным, что tours[id] не undefined, сначала проверьте его

<section className="details">
 <h2>{tours[id] && tours[id]["name"]}</h2>
</section>

Answer 2

Поскольку componentDidMount всегда вызывается после первого render, вы должны проверить свои реквизиты, чтобы избежать сбоев приложения:

---

const Details = ({
  tours,
  match: {
    params: { id }
  }
}) => (
  <section className="details">
    <h2>{tours.length && tours[id]["name"]}</h2>
  </section>
);