Почему у меня возникают ошибки в React с загрузкой данных из базы данных Postgresql?

Question

У меня есть база данных с 2 таблицами Персона и Город с отношением Один-ко-многим

Пример строки в Персоне:

{id: 1, name: 'John', city: 5}

Пример строки в City:

{id: 5, name: 'New York'}

В приложении React я получаю значения из базы данных Postgresql, сохраняю их в состоянии и показываю в компоненте (таблице):

...
render() {
 return (
  <table>
    <thead>
      <TableHeader/>
    </thead>
    <tbody>
      {this.props.person.map(item => {
        const city = this.props.city.find(el => el.id === item.city);

        return (<TableRow key={item.id} directory={item} directoryC={city}/>);
      })}
    </tbody>
  </table>
);

ВTableRow Я добавляю его в строки таблицы:

...
render() {
 return (
   <tr>        
     <td>{this.props.directory.name}</td>
     <td>{this.props.directoryC.name}</td>        
   </tr>
 );
}

Этот код работает , но в консоли я вижу это ошибка :

Uncaught (in promise) TypeError: Cannot read property 'name' of undefined

Что случилось?Как я могу исправить эту ошибку?

Обновление.Код извлечения:

onHandlePersonFetch() {
fetch(`${'127.0.0.1:3000'}/person`, {
  method: 'GET'
})
  .then((response) => {
    if (response.status >= 400) {
      throw new Error('Bad response from server');
    }
    return response.json();
  })
  .then(data =>
    this.setState({ person: data })
  );
  }

  onHandleCityFetch() {
fetch(`${'127.0.0.1:3000'}/city`, {
  method: 'GET'
})
  .then((response) => {
    if (response.status >= 400) {
      throw new Error('Bad response from server');
    }
    return response.json();
  })
  .then(data =>
    this.setState({ city: data })
  );
  }

Answer 1

Это неправильный способ обработки ошибок в обещаниях ... Измените это на:

 onHandlePersonFetch() {
    fetch(`${'127.0.0.1:3000'}/person`)
      .then(response => response.json())
      .then(data => this.setState({ person: data }))
      .catch(err => console.log(err));
  }

  onHandleCityFetch() {
    fetch(`${'127.0.0.1:3000'}/city`)
      .then(response => response.json())
      .then(data => this.setState({ city: data }))
      .catch(err => console.log(err));
  }

Кроме того, если вы выполняете асинхронную выборку данных (которой вы являетесь ...), она должнабыть выполненным в рамках метода жизненного цикла componentDidMount ...