ReactJS调用canBookSlot后如何更新slotsList触发组件重渲染

能否在then()回调内复用useEffect逻辑？ #

不能。React Hooks有严格的调用规则：useEffect仅允许在组件函数顶层、自定义Hook顶层调用，不能嵌入回调、条件判断、循环等代码块中执行，否则会破坏React对钩子状态的追踪链路，直接触发调用规则报错。

无重复代码的最优实现方案 #

你之前封装独立请求方法的思路完全正确，只需要修复两个核心问题即可：

• 不要在组件每次渲染时直接读取localStorage赋值给普通变量，普通变量变化不会触发组件重渲染，会导致判断逻辑一直拿初始值
• 预订请求成功后，除了刷新时段列表，还要同步更新localStorage中存储的用户信息，保证权限判断值和后端一致

你遇到userDetailsObj.canBook != 0恒为true的根源就是以上两点：既没有在预订成功后更新localStorage里的canBook值，也没有用响应式状态追踪用户信息变化，导致判断逻辑一直读取初始缓存值。

修正后可直接复用的代码 #

import { useEffect, useState } from 'react';
import Axios from 'axios';

// 抽离重复使用的接口地址为常量，后续维护仅需修改一处
const SLOT_QUERY_API = "http://localhost:3001/api/get/week1/ex";
const SLOT_BOOK_API = "http://localhost:3001/api/book/week1/ex";

function BookingComponent() {
  const [slotsList, setSlotsList] = useState([]);
  // 将用户信息转为响应式state，初始化时懒读取localStorage缓存，避免重复解析
  const [userDetails, setUserDetails] = useState(() => {
    const cacheStr = localStorage.getItem("userDetails");
    return cacheStr ? JSON.parse(cacheStr) : {};
  });

  // 封装可复用的时段列表拉取逻辑，首次加载、预订成功后都可调用
  const refreshSlotsList = () => {
    return Axios.post(SLOT_QUERY_API).then(res => {
      setSlotsList(res.data);
    });
  };

  // 组件首次挂载时拉取初始列表
  useEffect(() => {
    refreshSlotsList();
  }, []);

  const canBookSlot = (slotItem) => {
    // 直接读取响应式state中的用户信息，永远获取最新值
    if (userDetails.canBook != 0) {
      Axios.post(SLOT_BOOK_API, {
        room: userDetails.room,
        id: slotItem.id + 1,
      }).then(bookRes => {
        // 刷新时段列表
        refreshSlotsList();
        // 同步更新本地用户缓存和响应式state，保证后续权限判断准确
        // 若预订接口直接返回最新用户信息，直接取接口返回值即可；否则可额外加一次用户信息拉取请求
        const latestUserInfo = bookRes.data?.userInfo || { ...userDetails, canBook: 0 };
        localStorage.setItem("userDetails", JSON.stringify(latestUserInfo));
        setUserDetails(latestUserInfo);
      });
    }
  };

  return (
    // 你的组件渲染逻辑
    <div className="slot-list">{/* 渲染slotsList */}</div>
  )
}

额外优化建议 #

• 如果项目中多个组件需要用到时段预订、列表刷新逻辑，可以把这部分状态和方法封装为自定义Hook，进一步提升代码复用率
• 可以给请求加loading、错误提示等状态，提升交互体验
• 用户权限类信息建议统一存在全局状态管理（比如Context、Zustand、Redux）中，避免多个组件重复读取localStorage导致的状态不同步问题

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