Why is my component that receives props not working when I destructure out the properties, but when I use props.key it's working?

user_8502436 0
Viewed 1321

The Problem

I have an application that uses this React Redux Boilerplate: https://github.com/flexdinesh/react-redux-boilerplate

I created a new page that is connected to the injected reducer + saga. I receive following props: posts, loading, error, loadPosts and match

When I use these directly the app is working as expected. But as soon as I start to destructure the props, the app is behaving unexpectedly.

Especially with the match props.

When I do it like this: 

const SubforumPage = (props) => {
      useEffect(() => {
        const { id: subId } = props.match.params;
        console.log('props: ', subId);
      }, []);
    // .... other code
    }

No problem everything works.

But when I do it like this:

const SubforumPage = ({match}) => {
  useEffect(() => {
    const { id: subId } = match.params;
    console.log('props: ', subId);
  }, []);
// .... other code
}

match suddenly gets undefined!

I have really no clue what so ever why this is happening. It's the first time that I see an error like this.

This specific page is set up like this in the routing file:

<Route path="/sub/:id" component={SubforumPage} />

And it's clearly working when using (props) in the function arguments but not with ({match})

Why is this? Can please someone help me out here.

What have I tried?

  • I continuesly started destructuring one prop after another. At first this approach works and it's still not undefined but when I get to some props, it's different which ones, it will stop working.

I think it has to do something with how I use my useEffect() hook? I pass an empty array so it does just run when mounting. It seems like when I refresh the page, the posts are cleared out but the useEffect doesn't run anymore, so the new posts doesn't get fetched. Because hen also the console.log inside the useEffect hook is undefined doesn't even run. But for example the loading prop in console.log outside of useEffect is indeed not undefined (But that still does not explain why it's working with (props) as argument).

Am I just using useEffect wrong?

Many thanks

redux react-hooks reactjs javascript
1 Answers

Ok guys that was completely my fault. Guess I'm too tired :D. Here is what caused the problem:

I fetch my post in the useEffect hook. I also render a component where I pass in the posts. But the posts are not available because the component has to wait for the data to come in. So I completely forgot that I have to wait for the data.

Before:

return <PostsGroup posts={posts} />;

After: (correct)

return <PostsGroup posts={posts || []} />;

I had a check in place looking like this:

if (loading) return <CircularProgress />;

(before the other return). But it doesn't matter because loading is false when the component initially renders. So I also set the initial value from loading to true (in my initialState of the reducer). So I have now two checks in place.

Sorry guys. So stupid.

user_85024360
Related