React函数组件点击收藏图标不即时更新，需刷新如何修复？

核心问题 #

点击收藏/取消收藏后，仅调用了后端API，但未同步更新Redux中profile.favouriteMovies的状态。组件虽然触发重渲染，但读取的仍是旧状态，导致图标无法即时切换。

修复步骤 #

1. 给Redux Profile切片添加状态更新Action

在你的Redux Profile切片文件中，添加用于更新收藏列表的Action：

// 示例：store/profile.slice.js
import { createSlice } from '@reduxjs/toolkit';

const initialState = {
  favouriteMovies: []
};

const profileSlice = createSlice({
  name: 'profile',
  initialState,
  reducers: {
    // 添加收藏电影
    addFavouriteMovie: (state, action) => {
      state.favouriteMovies.push(action.payload);
    },
    // 移除收藏电影
    removeFavouriteMovie: (state, action) => {
      state.favouriteMovies = state.favouriteMovies.filter(id => id !== action.payload);
    }
  }
});

export const { addFavouriteMovie, removeFavouriteMovie } = profileSlice.actions;
export default profileSlice.reducer;

2. 修正Card组件的收藏逻辑

首先导入新增的Redux Action：

// 在Card组件顶部添加
import { addFavouriteMovie, removeFavouriteMovie } from '../../../store/profile.slice'; // 路径根据实际项目调整

然后修改changeIsMovieFavourite函数，在API请求成功后更新Redux状态，同时阻止事件冒泡避免误跳转：

const changeIsMovieFavourite = async (e) => {
  e.stopPropagation(); // 阻止事件冒泡，避免触发父元素的电影详情跳转

  if (isMovieFaved) {
    const error = await removeFavouriteMovie(currentUser, card.id);
    if (!error) { // 请求成功
      dispatch(removeFavouriteMovie(card.id));
    }
  } else {
    const error = await favouriteMovie(currentUser, card.id);
    if (!error) { // 请求成功
      dispatch(addFavouriteMovie(card.id));
    }
  }
};

同时更新IconButton的onClick绑定：

<IconButton className="fav-icon" onClick={changeIsMovieFavourite}>

3. 修正API工具函数的Promise返回逻辑

确保favouriteMovie和removeFavouriteMovie能正确返回请求结果，便于判断是否更新状态：

// favouriteMovie.js
export const favouriteMovie = async (currentUser: string, movieId: number) => {
  const userData = {
    userName: currentUser,
    movie: movieId,
  };

  try {
    const response = await fetch('http://localhost:8082/favouritemovie/', {
      method: 'POST',
      body: JSON.stringify(userData),
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    });
    const res = await response.json();
    return response.status === 200 ? null : res.errorMsg;
  } catch (error) {
    return '请求失败';
  }
};

// removeFavouriteMovie.js
export const removeFavouriteMovie = async (currentUser: string, movieId: number) => {
  const userData = {
    userName: currentUser,
    movie: movieId,
  };

  try {
    const response = await fetch('http://localhost:8082/removefavouritemovie/', {
      method: 'POST',
      body: JSON.stringify(userData),
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    });
    const res = await response.json();
    return response.status === 200 ? null : res.errorMsg;
  } catch (error) {
    return '请求失败';
  }
};

修复原理 #

当用户点击收藏图标时，先调用后端API，请求成功后立即通过Redux Action更新favouriteMovies状态。组件依赖该状态渲染图标，状态更新后会自动触发重渲染，实现图标的即时切换。同时阻止事件冒泡，避免点击收藏时误跳转到电影详情页。

内容的提问来源于stack exchange，提问作者rumon