Question

我正在尝试为帖子实现喜欢和不喜欢的功能。

当用户喜欢/不喜欢发布并将请求发送到服务器时，我更改了状态，如果请求失败，我将状态更改为先前的状态。但是以前的状态更改为新的状态，我不知道为什么。

export const dislikePostAction = (
    postId: string,
): ThunkAction<Promise<void>, RootState, {}, AnyAction> => {
    return async (dispatch: ThunkDispatch<{}, {}, AnyAction>, getState): Promise<void> => {
        console.log(getState().GroupPosts.posts); // Even here is new state
        const prevState = getState().GroupPosts.posts;
        console.log(prevState);
        const newState = prevState.map(item => {
            if (item.postId === postId) {
                const newPost = item;
                if (newPost.currentUserLiked === UserPostLike.DISLIKE) {
                    newPost.likeCount = item.likeCount + 1;
                    newPost.currentUserLiked = UserPostLike.NO_ACTION;
                } else {
                    newPost.likeCount = item.likeCount - 1;
                    newPost.currentUserLiked = UserPostLike.DISLIKE;
                }
                return newPost;
            } else {
                return item;
            }
        });
        console.log(prevState);
        dispatch(setPosts(newState));
        const response = await PostsApi.dislikePost(postId);
        if (!response.success) {
            console.log(prevState); // prev state here is same as newState
            dispatch(setPosts(prevState));
        }
    };
};

我将redux与redux-thunk一起使用

Answer 1

我用Post创建了一个新的new Post(item)对象，并解决了问题。

const newPost = new Post(item)

Answer 2

因为您要为newState分配prevState而不是对其进行突变，所以它将引用内存中prevState的地址，并且它将更改prevState，而您应该像这样通过突变prevState创建一个新的Obj或数组：如果数组：

   const prevState =[... getState().GroupPosts.posts];

如果对象：

 const prevState ={... getState().GroupPosts.posts};

或者您可以使用Object.assign()来创建一个新对象，而不引用内存中的prevState地址。

当redux中的状态更改时，存储在变量中的先前状态也会更改

2 个答案: