javascript - TypeError: Cannot read properties of undefined (reading 'map') ReactJs Getting data from a file - S

admin管理员组

文章数量:1399754

im tring to fetch data from a file called dummyData.js It has the following structure.

 export const Posts = [
    {
      id: 1,
      desc: "Love For All, Hatred For None.",
      photo: "assets/post/1.jpeg",
      date: "5 mins ago",
      userId: 1,
      like: 32,
      ment: 9,
    },
    {
      id: 2,
      photo: "assets/post/2.jpeg",
      date: "15 mins ago",
      userId: 2,
      like: 2,
      ment: 1,
    },

Now i am mapping the data from that file.

export default function Feed() {
    return (
        <div className="feed">
            <div className="feedWrapper">
               <Share/>
               {Posts.map((p) => (
                   <Post key={p.id} post={p}/>
               ))}
         
            </div>
        </div>
    ) 
}

here is my post ponent

export default function Post({post}) {
  console.log(post);
    return (
        <div>
            <div className="post">
                <div className="postWrapper">
                    <div className="postTop">
                        <div className="topLeft">
                            <img className="profilePic" src="/files/prof.png" alt="" />
                            <span className="postUsername">Kasun Gayantha</span>
                            <span className="postDate"> 5 mins ago</span>
                        </div>
                        <div className="topRight">
                            <MoreVert/>
                        </div>
                    </div>
                    <div className="postCenter">
                        <span className="postText">hey this is first post</span>
                        <img src="/files/prof.png" alt="" className="postImage" />
                    </div>
                    <div className="postBottom">
                        <div className="postBottomLeft">
                            <ThumbUpAltIcon htmlColor="blue" className="likeIcon"/>
                            <FavoriteIcon htmlColor="red" className="likeIcon"/>
                            <span className="postLikeCounter">32 people like it </span>
                        </div>
                        <div className="postBottomRight">
                            <span className="postCommentText"> ments</span>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    )
}

I have ponents called feed.jsx,Post.jsx

but when I pile this the following error es up

TypeError: Cannot read properties of undefined (reading 'map')

 return (
   9 |     <div className="feed">
  10 |         <div className="feedWrapper">
> 11 |            <Share/>
^  12 |            {Posts.map((p) => (
  13 |                <Post key={p.id} post={p}/>
  14 |            ))}

error is in from the line no 11. Im new to react , struggling to fix this. I have looked at many solutions on the internet.

im tring to fetch data from a file called dummyData.js It has the following structure.

 export const Posts = [
    {
      id: 1,
      desc: "Love For All, Hatred For None.",
      photo: "assets/post/1.jpeg",
      date: "5 mins ago",
      userId: 1,
      like: 32,
      ment: 9,
    },
    {
      id: 2,
      photo: "assets/post/2.jpeg",
      date: "15 mins ago",
      userId: 2,
      like: 2,
      ment: 1,
    },

Now i am mapping the data from that file.

export default function Feed() {
    return (
        <div className="feed">
            <div className="feedWrapper">
               <Share/>
               {Posts.map((p) => (
                   <Post key={p.id} post={p}/>
               ))}
         
            </div>
        </div>
    ) 
}

here is my post ponent

export default function Post({post}) {
  console.log(post);
    return (
        <div>
            <div className="post">
                <div className="postWrapper">
                    <div className="postTop">
                        <div className="topLeft">
                            <img className="profilePic" src="/files/prof.png" alt="" />
                            <span className="postUsername">Kasun Gayantha</span>
                            <span className="postDate"> 5 mins ago</span>
                        </div>
                        <div className="topRight">
                            <MoreVert/>
                        </div>
                    </div>
                    <div className="postCenter">
                        <span className="postText">hey this is first post</span>
                        <img src="/files/prof.png" alt="" className="postImage" />
                    </div>
                    <div className="postBottom">
                        <div className="postBottomLeft">
                            <ThumbUpAltIcon htmlColor="blue" className="likeIcon"/>
                            <FavoriteIcon htmlColor="red" className="likeIcon"/>
                            <span className="postLikeCounter">32 people like it </span>
                        </div>
                        <div className="postBottomRight">
                            <span className="postCommentText"> ments</span>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>
    )
}

I have ponents called feed.jsx,Post.jsx

but when I pile this the following error es up

TypeError: Cannot read properties of undefined (reading 'map')

 return (
   9 |     <div className="feed">
  10 |         <div className="feedWrapper">
> 11 |            <Share/>
^  12 |            {Posts.map((p) => (
  13 |                <Post key={p.id} post={p}/>
  14 |            ))}

error is in from the line no 11. Im new to react , struggling to fix this. I have looked at many solutions on the internet.

• javascript
• reactjs
• mapping

Share Improve this question Follow asked Sep 6, 2021 at 3:19 Banchi SecretBanchi Secret 2111 gold badge11 silver badge33 bronze badges 1

• How to import Posts ? – Viet Commented Sep 6, 2021 at 3:42

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

You are getting this error because the Posts array is undefined.

Do (Posts || []).map(.....) so that the .map is not called on an undefined variable.

You can do something like:

return (
    <div className="feed">
        <div className="feedWrapper">
            <Share />
            {(Posts || []).map(p => (
                <Post key={p.id} post={p} />
            ))}
        </div>
    </div>
);

This error shows up when you’re trying to use .map on an array, but that array isn’t defined yet.

You could try these options

1. Defining Posts as an empty array inside the state.
2. You could condionally render Post ponent based on its length

   return (
       <div className="feed">
           <div className="feedWrapper">
              <Share/>
              {Posts.length &&
                   Posts.map((p) => (
                      <Post key={p.id} post={p}/>
                   ))
               }     
           </div>
       </div>
    )
   

Always check for the length before looping through

export default function Feed() {
    return (
        <div className="feed">
            <div className="feedWrapper">
               <Share/>
               { Posts && Posts.length ?
                Posts.map((p) => (
                   <Post key={p.id} post={p}/>
               )) : null}
         
            </div>
        </div>
    ) 
}

本文标签：