Cannot read properties of undefined using redux ERROR

Question

I am having an error when refreshing my browser.

Uncaught TypeError: Cannot read properties of undefined (reading 'title')

And it keeps on repeating for all of my states (title, content, id) until I delete them from code down below... And also it works fine until I refresh the page.

import React, { FC, useEffect } from 'react';
import { useLocation, useParams } from 'react-router-dom';
import AddComment from 'src/components/ui/AddComment/AddComment';
import CommentSection from 'src/components/ui/CommentSection/CommentSection';
import PostContent from 'src/components/ui/PostContent/PostContent';
import PostHeader from 'src/components/ui/PostHeader/PostHeader';
import {useAppSelector } from 'src/store/app/hooks';

const Post: FC = () => {
  const { id } = useParams();
  const { posts } = useAppSelector((state) => state.post);

  return (
    <div>
      <PostHeader
        header={<h2>{posts.find(p => p.id === parseInt(id)).title}</h2>}
      >
        <div>
          {posts.find(p => p.id === parseInt(id)).content}
        </div>
      </PostHeader>
      <PostContent
        content={<div>{posts.find(p => p.id === parseInt(id)).content}</div>}
      />
      <AddComment id={id} />
      <CommentSection id={id} />
    </div>
  )
};

export default Post;

I also want to stop posts from dissapearing after refresh.

score 0 · Answer 1 · answered Dec 01 '22 at 01:22

I don't know the type definitions, but this has to do that your are trying to get a property from posts.find. If posts find doesn't match —which won't do when loading the state— that will fail.

Try adding nullisch coalescing opertators to all your Array.find methods

  <PostHeader header={<h2>{posts.find(p => p.id === parseInt(id))?.title}</h2>}>
    <div>{posts.find(p => p.id === parseInt(id))?.content}</div>
  </PostHeader>
  <PostContent content={<div>{posts.find(p => p.id === parseInt(id))?.content}</div>}/>
  <AddComment id = {id} />
  <CommentSection id = {id}/>

Okay but how can I prevent posts from dissapearing on refresh? — povodnikt, Dec 01 '22 at 10:52

score 0 · Accepted Answer · answered Dec 01 '22 at 10:05

0

Issue

The basic issue is that Array.prototype.find returns undefined when there is no match. The code should account for this and handle not having a matching post object gracefully.

Solution

I suggest only searching the posts array once and saving the result. If the result is truthy then access the properties, otherwise render null or some other fallback UI.

Example:

const Post : FC = () => {
  const { id } = useParams();
  const { posts } = useAppSelector((state) => state.post);

  const post = posts.find(p => String(p.id) === id);

  if (!post) {
    return <div>No post here.</div>;
  }

  return (
    <div>
      <PostHeader header={<h2>{post.title}</h2>}>
        <div>{post.content}</div>
      </PostHeader>
      <PostContent content={<div>{post.content}</div>} />
      <AddComment id={id} />
      <CommentSection id={id} />
    </div>
  )
};

answered Dec 01 '22 at 10:05

Drew Reese

165,259
14
153
181

Okay but how can I prevent posts from dissapearing on refresh? – povodnikt Dec 01 '22 at 10:52
@povodnikt Are you referring to the `const { posts } = useAppSelector((state) => state.post);` from Redux? Redux is in-memory storage, are you persisting the redux store to localStorage so it persists through page reloads? – Drew Reese Dec 01 '22 at 10:54
Yes I am reffering to them from redux. and I also am not persisting redux in localStorage. – povodnikt Dec 01 '22 at 11:00
@povodnikt I see. I'd suggest exploring integrating [redux-persist](https://www.npmjs.com/package/redux-persist) into your app for just this use case. If you are already familiar with react-redux this is probably a 10-15 minute integration. – Drew Reese Dec 01 '22 at 11:04
Can you check out this also please? [Similar problem I have](https://stackoverflow.com/questions/74641795/cannot-read-properties-of-undefined-in-react-using-redux?noredirect=1) – povodnikt Dec 01 '22 at 16:31

Cannot read properties of undefined using redux ERROR

2 Answers2

Issue

Solution