I have a problem with some error. I've been trying to fix this for a week but I still can't find what is a problem....
Uncaught TypeError: Cannot destructure property 'username' of 'match.parse' as it is undefined.
import React, { useEffect } from 'react';
import qs from 'qs';
import { withRouter } from 'react-router-dom';
import { useDispatch, useSelector } from 'react-redux';
import PostList from '../../components/posts/PostList';
import { listPosts } from '../../modules/posts';
const PostListContainer = ({ location, match }) => {
const dispatch = useDispatch();
const { posts, error, loading, user } = useSelector(
({ posts, loading, user }) => ({
posts: posts.posts,
error: posts.error,
loading: loading['posts/LIST_POSTS'],
user: user.user,
}),
);
useEffect(() => {
const { username } = match.parse;
const { tag, page } = qs.parse(location.search, {
ignoreQueryPrefix: true,
});
dispatch(listPosts({ tag, username, page }));
}, [dispatch, location.search]);
return (
<PostList
loading={loading}
error={error}
posts={posts}
showWriteButton={user}
/>
);
};
export default withRouter(PostListContainer);
As the error message says, because match.parse is undefined, you cannot destruct username from it, meaning you cannot do:
const { username } = match.parse;
The left side's curly braces are called a destructor in ECMAScript because it "destructs" the value from the right-hand side object. It's the same as:
const username = match.parse.username;
and if match.parse is undefined, it's the same as:
const username = undefined.username;
which obviously is wrong.
So, try console.logging match.parse and see if it is actually undefined. If so, you need to debug why it is.