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

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

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

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

Пример строки в Городе:

{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 })
  );
  }