当 redux 中的状态发生变化时，存储在变量中的先前状态也会发生变化

Question

我正在尝试为 post 实施喜欢和不喜欢的功能。

我在用户 like/dislike post 时更改了状态并向服务器发送请求，如果请求失败，我将状态更改为之前的状态。但是以前的状态变成了新的状态，我不知道为什么。

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

因为您将 newState 分配给 prevState 而不是对其进行变异，因此它将引用内存中 prevState 的地址，并且它将更改 prevState你应该通过改变 prevState 来创建一个新的 Obj 或数组，如下所示：如果数组：

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

如果对象：

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

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

Answer 2

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

const newPost = new Post(item)

当 redux 中的状态发生变化时，存储在变量中的先前状态也会发生变化

Previous state stored in variable changes too when state change in redux

javascript

reactjs

react-native

redux

redux-thunk