为何调用setTimeSlotsList(fetchAPI(day))会触发无限循环？

核心原因：违反React Hook调用规则 #

你的FormValues是普通函数，但内部调用了useEffect Hook。如果这个函数在组件的渲染阶段直接执行（比如在组件JSX或渲染逻辑里调用FormValues()），就违反了React的Hook规则：Hook只能在组件或自定义Hook的顶层调用。

这种情况下，每次组件渲染都会执行FormValues()，触发内部的useEffect；而useEffect里的setTimeSlotsList会更新组件状态，导致组件重新渲染，再次执行FormValues()，形成无限循环。

仅用console.log(fetchAPI(day))时，没有触发状态更新，组件不会重新渲染，因此不会出现循环。

其他潜在问题及修复 #

1. updateTime的闭包陷阱
   直接在updateTime里使用timeSlotsList会捕获旧的状态值，导致更新逻辑出错。应该改用函数式更新获取最新状态：

   function updateTime (valueTime) {
     setTimeSlotsList(prevList => prevList.filter(a => a !== valueTime))
   }
   

2. FormValues的正确写法
   若要复用这部分逻辑，需将FormValues改为自定义Hook，或者直接把逻辑放到组件顶层：

   // 改为自定义Hook
   function useFormValues() {
     const { values } = useFormikContext();
     const day = new Date(values.date)
   
     useEffect(() => {
       setTimeSlotsList(fetchAPI(day))
     }, [values.date]);
   }
   
   // 在组件顶层调用Hook
   function YourComponent() {
     const [timeSlotsList, setTimeSlotsList] = useState([])
     useFormValues();
   
     // ...其他组件逻辑
   }
   

或者直接将useEffect移到组件顶层，避免封装成普通函数：

function YourComponent() {
  const [timeSlotsList, setTimeSlotsList] = useState([])
  const { values } = useFormikContext();
  const day = new Date(values.date)

  useEffect(() => {
    setTimeSlotsList(fetchAPI(day))
  }, [values.date]);

  // ...updateTime、AvailableTimes等其他逻辑
}

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