React组件首次调用函数时State值为null的问题排查

核心问题是闭包捕获了旧的state值：
当你在handleDiscount中通过接口获取到discountPercent并更新状态后，React的状态更新是异步的，当前渲染周期内的discountPercent并不会立刻变成新值。而handleTickets如果是在状态更新前的渲染周期创建的，它捕获的还是更新前的null值，所以首次调用时拿到的是旧值，后续组件重新渲染后，handleTickets才会捕获新的状态值。

你用useCallback无效，大概率是依赖项配置错误：
如果handleTickets的逻辑依赖discountPercent，但你没把它加入useCallback的依赖数组，那么useCallback返回的始终是旧版本的函数，依然会捕获旧的state值。

可行的解决方案： #

1. 修正useCallback的依赖数组
   把discountPercent添加到handleTickets的依赖列表中，确保状态更新后，handleTickets能重新生成并捕获最新值：

const handleTickets = useCallback(() => {
  // 这里使用discountPercent进行计算
  console.log(discountPercent);
}, [discountPercent]); // 必须加入依赖

2. 直接传递最新值（适合获取折扣后立即调用的场景）
   如果handleTickets是在handleDiscount获取到折扣后立刻调用，直接把接口返回的最新值作为参数传入，绕开闭包问题：

const handleDiscount = async () => {
  const res = await fetch('/api/get-discount');
  const newDiscount = res.data.discountPercent;
  setDiscountPercent(newDiscount);
  // 直接传最新的折扣值给handleTickets
  handleTickets(newDiscount);
};

const handleTickets = useCallback((discount) => {
  // 优先使用传入的参数， fallback到state值
  const actualDiscount = discount ?? discountPercent;
  // 后续逻辑
}, [discountPercent]);

3. 用useRef保存最新状态
   利用useRef的可变特性，同步最新的discountPercent值，这样handleTickets可以随时获取到最新值，不受闭包影响：

const discountRef = useRef(null);

// 状态更新时同步ref
useEffect(() => {
  discountRef.current = discountPercent;
}, [discountPercent]);

const handleTickets = useCallback(() => {
  // 直接从ref获取最新值
  const currentDiscount = discountRef.current;
  if (currentDiscount) {
    // 执行逻辑
  }
}, []); // 这里不需要依赖discountPercent

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