React自定义useFetchListDetails钩子listDetails更新不生效问题

可能的问题点 #

1. 状态更新的引用判定：若后端返回的数组与原状态数组引用相同，React的useState会判定为无变化，不触发UI更新。
2. 函数引用不稳定：HandleFetchDetails未做引用稳定处理，组件重渲染时会生成新函数实例，可能干扰状态更新逻辑。
3. 初始状态不规范：listDetails初始值为undefined，易引发渲染逻辑的隐性问题。
4. token获取时机滞后：钩子初始化时仅获取一次token，若token后续更新会导致请求使用旧值（虽你提到接口返回正确，仍建议优化）。

修复后的useFetchListDetails钩子 #

import React, { useState, useCallback } from "react";
import axios from "axios";

export const useFetchListDetails = () => {
  // 初始值设为空数组，避免undefined导致的渲染异常
  const [listDetails, setListDetails] = useState([]);

  // 用useCallback包裹函数，确保引用稳定
  const HandleFetchDetails = useCallback((idConfer) => {
    // 每次请求时重新获取token，同步最新授权信息
    const token = JSON.parse(localStorage.getItem("AuthToken"));
    if (!token) {
      alert("未检测到授权令牌");
      return;
    }

    axios({
      method: "post",
      url: `${process.env.REACT_APP_API_URL_API_LIST_SERVICECONFER}`,
      headers: {
        Authorization: `Bearer ${token}`,
        "Content-Type": "application/json",
      },
      data: JSON.stringify({
        idConfer: parseInt(idConfer),
      }),
    })
      .then((r) => {
        // 通过数组解构创建新引用，强制React检测到状态变化
        const updatedList = [...r.data.Data.ListService];
        setListDetails(updatedList);
      })
      .catch(() => alert("خطا در شبکه"));
  }, []);

  return { HandleFetchDetails, listDetails };
};

删除操作的调用逻辑优化 #

确保删除请求完全完成后再触发数据重新获取，避免并发请求导致的数据不一致：

<button 
  onClick={() => {
    // 假设fetchDelete返回Promise
    fetchDelete()
      .then((r) => {
        if (r.data.resCode === 1) {
          HandleFetchDetails(factor.ID);
        }
      })
      .catch(() => alert("删除操作失败"));
  }}
>Click</button>

额外验证步骤 #

1. 确认idConfer参数传递正确，确保请求目标资源的最新数据。
2. 在setListDetails前打印r.data.Data.ListService，验证返回数组确实是更新后的内容。
3. 检查列表渲染逻辑，确保完全基于listDetails状态渲染，而非缓存的旧数据。

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