React: URL Profile ID doesn't match (match.params.id)

user_11243223 0
Viewed 449

So whenever I clicked the View Profile Link

 <Link to={`/profile/${_id}`} className="btn btn-primary">
                View Profile
 </Link>

It shows in the URL the User ID of the Profile which is Good.

But whenever I Clicked it to Match it with this Button I get an error.

const Profile = ({ getProfileById, match }) => {
useEffect(() => {
    getProfileById(match.params.id);
}, [getProfileById]);

return <div>test</div>;

};

I get on my console

React Hook useEffect has a missing dependency: 'match.params.id'. Either include it or remove the dependency array

this is what is in my app Js.

   <Route
         exact
         path="/profile/:id"
         component={Profile}
     />

I think it doesn't match with the URL to the button I clicked.

and inside the Redux Devtools it only returns a Profile Error.

react-router react-redux reactjs
2 Answers

In this case, the linter rule which is producing the warning: React Hook useEffect has a missing dependency: 'match.params.id'. Either include it or remove the dependency array, is telling you that you have another dependency. Use this instead:

const Profile = ({ getProfileById, match }) => {
useEffect(() => {
    getProfileById(match.params.id);
}, [getProfileById, match.params.id]);

return <div>test</div>;

The linter doesn't explore your whole app to determine where and how match is used. It also couldn't know how you intend to use it in the future, as a result, it asks that you put it in the dependency array along with getProfileId.

If you had imported getProfileId or placed it outside of the component instead of passing it down as a prop, you could safely remove getProfileId from the dependencies. All of this is to say that figuring out what goes inside the array takes a bit of additional understanding. Dan Abramov wrote a great blog post that helped me wrap my head around when and how to use the dependency array. This post might be a good place to start, if you find Dan's post a bit too broad since it deals with more generalized concepts of writing resilient components.

user_35778490

I managed to figure out what's wrong. It's in my API. I am trying to hit the .get in my API

enter image description here

But inside my API it is indicated the patch. enter image description here

and I changed it to get. enter image description here

and it works.

enter image description here

user_112432230
Related