當 redux 中的 state 更改時，存儲在變量中的先前 state 也會更改

Question

我正在嘗試為帖子實現喜歡和不喜歡的功能。

當用戶喜歡/不喜歡帖子並向服務器發送請求時，我更改了 state，如果請求失敗，我將 state 更改為以前的 state。 但是以前的 state 更改為新的 state ，我不知道為什么。

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

我用new Post(item)創建了新的Post object 並解決了問題。

const newPost = new Post(item)

Answer 2

因為您將newState分配給prevState而不是對其進行變異，所以它將引用prevState中 prevState 的地址，並且它將更改prevState而您應該通過像這樣變異prevState創建一個新的 Obj 或數組：如果數組：

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

如果 Object：

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

或者您可以使用Object.assign()將創建一個新的 Object 而不是參考 memory 中的prevState地址。