如何在React轮播组件中实现点赞按钮并实时更新状态

你的问题核心在于：从React Router loader获取的fruits是初始静态数据，点赞操作后没有更新本地状态或重新拉取数据，导致组件无法自动重新渲染。同时你单独维护了currentFruit状态，它不会随着原始fruits数组的变化而同步更新。下面提供两种可行的解决方法：

方法一：通过React Router重新验证loader数据 #

利用React Router的revalidate方法，在点赞请求成功后触发loader重新拉取最新的水果列表，确保数据与后端完全同步：

1. 导入并使用useRevalidator钩子：

import { useLoaderData, useRevalidator } from 'react-router-dom';

const Fruits = () => {
  const response = useLoaderData();
  const fruits = response.data;
  const { revalidate } = useRevalidator();
  const [fruitIndex, setFruitIndex] = useState(0);
  
  // 移除currentFruit的state，直接从fruits和fruitIndex计算
  const currentFruit = fruits[fruitIndex];
  const isThisFruitLiked = currentFruit.isLiked;

2. 简化前后切换按钮的逻辑，只维护fruitIndex状态：

const handlePreviousFruit = () => {
  setFruitIndex(prev => prev === 0 ? fruits.length - 1 : prev - 1);
};

const handleNextFruit = () => {
  setFruitIndex(prev => prev >= fruits.length - 1 ? 0 : prev + 1);
};

3. 在handleLike请求成功后调用revalidate刷新数据：

const handleLike = async (id, isLiked) => {
  try {
    const reqBody = { id, isLiked };
    if (isLiked) {
      await axios.post(`/api/v1/fruits`, reqBody);
    } else {
      await axios.delete(`/api/v1/fruits?id=${id}`);
    }
    // 触发loader重新拉取数据，组件自动更新
    await revalidate();
  } catch (error) {
    console.error(error);
  }
};

方法二：本地直接更新状态（无需重新请求） #

如果不想重新拉取整个水果列表，可以把初始loader数据存入state，点赞成功后直接修改对应水果的isLiked状态，减少网络请求：

1. 将loader数据存入本地state：

const response = useLoaderData();
const [fruits, setFruits] = useState(response.data);
const [fruitIndex, setFruitIndex] = useState(0);
const currentFruit = fruits[fruitIndex];

2. 在handleLike成功后更新本地数组：

const handleLike = async (id, isLiked) => {
  try {
    const reqBody = { id, isLiked };
    if (isLiked) {
      await axios.post(`/api/v1/fruits`, reqBody);
    } else {
      await axios.delete(`/api/v1/fruits?id=${id}`);
    }
    // 直接更新本地数组中对应水果的点赞状态
    setFruits(prev => prev.map(fruit => 
      fruit.id === id ? { ...fruit, isLiked: !fruit.isLiked } : fruit
    ));
  } catch (error) {
    console.error(error);
  }
};

同样，前后切换按钮的逻辑只需要维护fruitIndex即可，不需要单独更新currentFruit。

两种方法对比 #

• 方法一适合需要确保数据完全和后端同步的场景（比如其他用户可能修改了水果数据），但会多一次网络请求。
• 方法二更高效，响应更快，适合仅修改当前水果点赞状态的场景。

内容的提问来源于stack exchange，提问作者me-an-ape