useState 创建无限循环

Question

为什么分配“setTimeSlotsList(fetchAPI(day))”会创建 inifit 循环？

当我只是“console.log(fetchAPI(day))”进行测试时，代码流程似乎正在工作。

     function FormValues () {
      const { values } = useFormikContext();
      const day = new Date(values.date)

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

Answer 1

React 中的

useEffect

钩子旨在每当依赖项数组中的依赖项之一发生更改时运行其回调函数。这里

values.date

是依赖项。因此每次更改时 useEffect 都会运行。当values.date发生变化时，该效果就会运行，从而触发

setTimeSlotsList(fetchAPI(day))

。 如果

fetchAPI(day)

以某种方式触发了 value.date 的更改，则会触发新的渲染，并且

useEffect

再次运行，因为values.date 是一个新的对象/引用。这会创建一个循环，因为 value.date 在每次渲染时都会发生变化。