Displaying Node MySQL Results in React Using State

Question

My node.js MySQL query returns a single row wrapped in [RowPacketData] which I can normally access the ID field using results[0].ID.

However, when I store the result in React state (using hooks) it does not work. I can access the result object, but not fields within it.

function MyReactComponent() {
  const [dbEntry, setDbEntry] = useState();

  useEffect(() => {
    const fetchData = async () => {
      const result = await queryFunc(`SELECT * FROM table LIMIT 1`);

      console.log(result[0]); // <-- Works (shows [RowDataPacket] object)
      console.log(result[0].ID); // <-- Works (shows ID)

      setDbEntry(result);
    };

    fetchData();
  }, []);

  console.log(dbEntry[0]); // <-- Works (shows [RowDataPacket] object)
  console.log(dbEntry[0].ID); // <-- TypeError: Cannot read property '0' of undefined

  return (
    <p>
      {dbEntry[0].ID} // <-- How do I render here?
    </p>
  )
}

What's going on here? I have a feeling React is coercing the result object somehow, but I can't figure it out...

Dupocas · Accepted Answer · 2019-07-05 16:38:14Z

3

When you need to display data that comes from an async font(API calls for example), it's possible (actually almost certain) that it won't be available by the time the first render occurs, to solve that there is actually a few things you could do:

Placeholder state

You could have a model of what the data will look like described as your initial state, so properties won't be undefined anymore:

const [state, setState] = useState({
    data:[
        {name: ''}
    ]
})

Assuming that your data will have this format accessing state.data[0].name won't throw an error. This could be useful in some cases but I personally don't like the approach.

Conditional Render

At each render you should check for a condition and only if satisfied render the piece of code:

return(
    <>
        <div>Title</div>
        {Boolean(state.data.length) && <div>{state.data[0].name}</div>}
    </>
)

Suspense

That one is brand new, if you have a component tha't need to perform side effects before render it's content, you should have a fallback content to be displayed while the async action is being perform.

<Suspense fallback={<span>Loading</span>}>
    <MYAsyncComponent />
</Suspense>

edited Jul 5, 2019 at 16:38

answered Jul 5, 2019 at 15:00

Dupocas

21.5k7 gold badges44 silver badges59 bronze badges

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

2 Comments

Trees4theForest Over a year ago

Hmm you may be on to something. So then... How do I render those values in my component?

Dupocas Over a year ago

It's called conditional render. I'll update de question

Collectives™ on Stack Overflow

Displaying Node MySQL Results in React Using State

1 Answer 1

Placeholder state

Conditional Render

Suspense

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Placeholder state

Conditional Render

Suspense

2 Comments

Your Answer

Sign up or log in

Post as a guest