如何在调用checkHandler后重新触发useEffect更新后端数据？

你的问题核心在于：useEffect的依赖数组为空，导致它只在组件首次挂载时执行一次GET请求。当你通过POST请求修改后端数据后，前端没有主动重新拉取最新数据，所以页面只能靠刷新才能显示更新内容。

下面提供两种可行的解决方式：

方式一：抽离GET请求为独立函数，在POST成功后直接调用 #

这种方式更直观高效，不需要依赖useEffect的重新执行，而是在修改操作完成后主动获取最新数据：

const [message, setMessage] = useState([]);

// 抽离获取数据的函数
const fetchMessages = () => {
  axios
    .get(getAllMessage, config)
    .then((res) => {
      setMessage(res.data);
      console.log("数据已更新");
    })
    .catch((err) => {
      console.log(err);
    });
};

// 组件挂载时首次获取数据
useEffect(() => {
  fetchMessages();
}, []);

const checkHandler = (e) => {
  let item = e.target.closest("[data-id]");
  const disLikeMessage = `http://localhost:3001/api/like/dislike/${item.dataset.id}`;
  const likeMessage = `http://localhost:3001/api/like/${item.dataset.id}`;

  let requestPromise;
  if (!item.checked) {
    console.log("取消点赞");
    requestPromise = axios.post(disLikeMessage, {}, config);
  } else {
    console.log("点赞");
    requestPromise = axios.post(likeMessage, {}, config);
  }

  // POST请求成功后，立刻重新获取最新数据
  requestPromise
    .then(() => {
      fetchMessages();
    })
    .catch((err) => {
      console.log(err);
    });
};

方式二：通过状态变量触发useEffect重新执行 #

如果你坚持要通过useEffect重新执行来更新数据，可以添加一个用于触发更新的状态变量，把它加入useEffect的依赖数组：

const [message, setMessage] = useState([]);
// 新增一个触发更新的状态
const [refreshTrigger, setRefreshTrigger] = useState(0);

useEffect(() => {
  axios
    .get(getAllMessage, config)
    .then((res) => {
      setMessage(res.data);
      console.log("数据已更新");
    })
    .catch((err) => {
      console.log(err);
    });
}, [refreshTrigger]); // 把触发变量加入依赖数组

const checkHandler = (e) => {
  let item = e.target.closest("[data-id]");
  const disLikeMessage = `http://localhost:3001/api/like/dislike/${item.dataset.id}`;
  const likeMessage = `http://localhost:3001/api/like/${item.dataset.id}`;

  let requestPromise;
  if (!item.checked) {
    console.log("取消点赞");
    requestPromise = axios.post(disLikeMessage, {}, config);
  } else {
    console.log("点赞");
    requestPromise = axios.post(likeMessage, {}, config);
  }

  requestPromise
    .then(() => {
      // 更新触发变量，让useEffect重新执行
      setRefreshTrigger(prev => prev + 1);
    })
    .catch((err) => {
      console.log(err);
    });
};

两种方式对比 #

• 方式一更直接，POST操作完成后立刻拉取数据，避免了额外状态变量的维护，推荐优先使用。
• 方式二更适合需要在多个地方触发数据刷新的场景，但需要额外维护一个状态变量。

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