React函数组件如何从子组件触发父组件更新并重渲染

问题根因 #

你的代码核心问题出在fetchRooms的异步逻辑编写不规范，没有正确等待所有异步操作执行完成，导致状态更新时序不符合预期，甚至出现状态漏更新的情况：

1. 混用async/await和.then回调，仅等待了接口请求的promise，没有等待res.json()的异步操作，setRooms、setUnavailableRooms的执行时机晚于setLoading(false)，且不受外层await控制
2. 第二次调用fetchRooms时没有重置loading状态为true，如果接口返回的房间数据引用和旧数据意外相等，就会出现无任何状态更新、父组件不重渲染的问题
3. 若子组件RoomManagementModal使用了React.memo包裹，未被useCallback缓存的fetchRooms可能会出现props比对异常的问题（概率较低）

修复方案 #

1. 重写fetchRooms异步逻辑 #

统一使用async/await管理异步流程，每次拉取数据前先重置loading状态，确保所有状态更新逻辑可被追踪：

// 用useCallback缓存fetchRooms引用，避免子组件props无意义变化
const fetchRooms = useCallback(async () => {
  setLoading(true); // 拉取前先置为加载状态，保证状态必有变化
  try {
    const roomsRes = await getAllRooms();
    const roomsData = await roomsRes.json();
    setRooms(roomsData);

    const unavailableRes = await getAllRoomsUnavailable();
    const unavailableData = await unavailableRes.json();
    setUnavailableRooms(unavailableData[0]);
  } catch (err) {
    console.error("拉取房间数据失败:", err);
  } finally {
    setLoading(false);
  }
}, []);
// useState返回的setter函数是稳定引用，所以useCallback依赖项可以为空

2. 校验后端返回结果 #

可以在setRooms前加一行打印，确认新增数据后调用fetchRooms确实能拿到最新的房间列表，排除后端写入成功但返回旧数据的问题。

3. 强制重渲染方案（不推荐，仅临时调试用） #

如果确实需要强制触发父组件重渲染，可以新增一个无业务含义的计数器状态，每次调用fetchRooms时更新计数器：

const [, setForceRender] = useState(0);
// 在fetchRooms的finally块中添加
setForceRender(prev => prev + 1);

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