Redux News Project step 14

Hi, I’m really battling to finish this project. I am currently stuck on step 14. I am able to type in a comment, but when I click submit my comment doesn’t render. I have checked the console and it is saying that I have an error : Uncaught ( in promise ) TypeError : Cannot read property ‘payload’ of undefined. I looked in the React Dev Tools and it is showing status as postCommentForArticleId. pending as being true.

Can anyone point me in the right direction as to where to look for this error?

Here is my code for the fulfilled status as well as my relevant thunk.

Fulfilled status:

[postCommentForArticleId.fulfilled]: (state, action) => {
if (state.byArticleId[action.payload.articleId]) {
state.byArticleId = {…state.byArticleId, [action.payload.articleId]: […state.byArticleId[action.payload.articleId].action.payload.text]}
} else {
state.byArticleId = {…state.byArticleId, [action.payload.articleId]:[action.payload.comment]}
};
state.createCommentIsPending = false;
state.failedToCreateComment = false;
}
}

Code for the thunk:

export const postCommentForArticleId = createAsyncThunk(
‘comments/postCommentForArticleId’,
async({articleId, comment}) => {
const requestBody = JSON.stringify({comment});
const response = await fetch(api/articles/${articleId}/comments, {method: ‘POST’, body: requestBody});
const json = await response.json();
return json;
}
)

Thanks
K

Hey K,
I think you’re having the same problem as I was for a long time. Look at your postCommentForArticleId and compare it really closely to what you’re being told to do in the task; there’s one thing you’ve done wrong that is really easy to miss (in my case, I had to come back like weeks later to try to fix it to see it).

Thanks for the encouragement. I saw your previous comments about comment being an object with a comment property, but I thought I had dealt with that by using JSON.stringify({comment});

I’ve changed it to be ({comment: comment}) in case that was what was wrong, but it is still not loading the comment I try to post. Any help will be much appreciated. I’ve been stuck on this project for over 2 weeks now.

Thanks
Kath

Hey Kath,
Ah, you might have in fact been right there, may have been a bit quick to judge.

My other immediate thought would be to simplify your .fulfilled statement. Basically, you just need to add the comment to the list of comments that are already there - and because you’re using the Immer library with toolkit, you don’t have to worry about mutating state. So, you can just push() the comment to the array of comments.

My implementation was:

 [postCommentForArticleId.fulfilled]: (state, action) => {
      state.createCommentIsPending = false;
      state.failedToCreateComment = false;
      state.byArticleId[action.payload.articleId].push(action.payload)
    },

I think if that doesn’t solve it, and based on what you said about payload being undefined, the problem might be somewhere else.

Thank you!!!

I think I was trying to cover too many bases and made my .fulfilled statement too complex as you suggested.

Thanks again :smiley:

1 Like