Why I have errors in React with load data from database Postgresql?

Question

I have database with 2 tables Person and City with relationship One-to-Many

Example of row in Person:

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

Example of row in City:

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

In React app, I get values from database Postgresql, save it in state and show in component (table):

...
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>
);

In TableRow I add it to table rows:

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

This code is works, but in console I see this error:

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

What happend? How can I fix this error?

Update. Fetch code:

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

It's telling you that there is an error but you didn't catch it... Post your fetch code — SakoBu
– SakoBu, Commented Oct 20, 2018 at 21:33
It looks like the code is working as expected. However, the error seems to happen when your fetching the data from the database (possibly using the fetch method which would explain the TypeError of the Promise). Check the console to figure out which file is throwing undefined. That should give you a better idea of where the problem is originating. — Juan Marco
– Juan Marco, Commented Oct 20, 2018 at 21:39
@JuanMarco I added to post my fetch code. Please check it, maybe the problem is with this — Jack
– Jack, Commented Oct 21, 2018 at 8:00

Juan Marco · Accepted Answer · 2018-10-22 13:32:34Z

1

That is not the proper way to do error handling in promises... Change to this:

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

Also, if you are doing async data fetching (which you are...) it should be done within the componentDidMount lifecycle method...

edited Oct 22, 2018 at 13:32

Juan Marco

3,2512 gold badges31 silver badges35 bronze badges

answered Oct 21, 2018 at 9:55

SakoBu

4,0311 gold badge18 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jack Over a year ago

I call onHandlePersonFetch() and onHandleCityFetch() in ComponentDidMount

Juan Marco Over a year ago

If that's the case, then both handlePersonFetch() and handleCityFetch() should return response.json() so that when you call these methods in componentDidMount() you do a setState for both person and city from there.

Collectives™ on Stack Overflow

Why I have errors in React with load data from database Postgresql?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related