添加依赖项时使用useEffect（）挂钩时如何避免无限循环？

Question

我正在制作这样的 TimePicker

，我还有一个状态是持续时间（从开始到结束的小时数），我使用 useEffect() 进行了开始时自动更改结束时间或持续时间更改功能。

当我尝试更改持续时间时它会起作用

但是当我更改开始或结束时间时出现错误 这是我的代码：

    useEffect(() => {
        setEnd(moment(start).add(duration, 'hours'));
    }, [start, duration]);
    useEffect(() => {
        setDuration(moment.duration(end.diff(start)).asHours());
    }, [end, start]);

CodeSanBox Sample（这个问题有点不同，因为我改进了一些关于时刻的逻辑）

更新：感谢您的帮助，我做到了，这是最终代码： CodeSanBox Final

Answer 1

你的问题是你正在修改你的 useEffect 钩子所依赖的东西。如果你的钩子只应该在time 更改时运行，那么不要在钩子中更改time，否则它会无限循环。

如果您确实需要反馈循环但不希望它是无限的，标准解决方法有一个布尔状态，告诉您是否在效果挂钩内调用 timeChange。

function Foo() {
  const [shouldUpdate, setShouldUpdate] = useState(false);
  const [time, setTime] = useState(...);

  useEffect(() => {
    if (shouldUpdate) {
      setShouldUpdate(false);
      setTime(...);
    }
  }, [shouldUpdate, time]);
  return whatever;
}

那么setShouldUpdate(true)应该被任何真正触发状态改变的东西调用。

Answer 2

https://codesandbox.io/s/timepicker-8mo3x?file=/src/App.js

好的，我想我明白了；可能会进一步重构，尽管它有效：

import React, { useState, useEffect } from "react";
import "./styles.css";
import { TimePicker } from "antd";
import "antd/dist/antd.css";
import moment from "moment";

const HHmm = "HH:mm";

export default function App() {
  const [time,setTime] = useState({
    start: "",
    end: "",
    duration: ""
  })
 
  const onStartChange = value => {
    if(time.start && time.end && time.duration) {
      const diffHours = value.diff(time.end, "hours");
      const diffMinutes = moment
        .utc(moment(value, HHmm).diff(moment(time.end, HHmm)))
        .format("mm");

      setTime((time)=>({
        start: value,
        end: time.end,
        duration: moment(`${diffHours} : ${diffMinutes}`, HHmm)
      }));
    } else {
      setTime((time)=>({
        start: value,
        end: time.end,
        duration: time.duration
      }))
    }

  };

  const onDurationChange = value => {
    if(time.start && time.end && time.duration) {
      const endToStartTime = moment(time.start)
          .add(value.hours(), "h")
          .add(value.minutes(), "m");

      setTime((time)=>({
        start: time.start,
        end: endToStartTime,
        duration: value
      }));
    } else {
      setTime((time)=>({
        start: time.start,
        end: time.end,
        duration: value
      }))
    }
    
  };

  const onEndChange = value => {
    if(time.start && time.end && time.duration) {
      const diffHours = value.diff(time.start, "hours");
      const diffMinutes = moment
        .utc(moment(value, HHmm).diff(moment(time.start, HHmm)))
        .format("mm");

      setTime((time)=>({
        start: time.start,
        end: value,
        duration: moment(`${diffHours} : ${diffMinutes}`, HHmm)
      }));
    } else {
      setTime((time)=>({
        start: time.start,
        end: value,
        duration: time.duration
      }))
    }
  };

  useEffect(()=>{
      if(time.start && time.end && !time.duration) {
        const diffHours = time.end.diff(time.start, "hours");
        const diffMinutes = moment
          .utc(moment(time.end, HHmm).diff(moment(time.start, HHmm)))
          .format("mm");
        setTime((time)=>({
          start: time.start,
          end: time.end,
          duration: moment(`${diffHours} : ${diffMinutes}`, HHmm)
        }));
      }

      if(time.start && !time.end && time.duration) {
        const endToStartTime = moment(time.start)
          .add(time.duration.hours(), "h")
          .add(time.duration.minutes(), "m");
        setTime((time)=>({
          start: time.start,
          end: endToStartTime,
          duration: time.duration
        }));
      }

      if(!time.start && time.end && time.duration) {
        const startToEndTime= moment(time.end)
          .subtract(time.duration.hours(), "h")
          .subtract(time.duration.minutes(), "m");
        setTime((time)=>({
          start: startToEndTime,
          end: time.end,
          duration: time.duration
        }));
      }
  },[time])

  return (
    <div className="App">
      <span>Start: </span>
      <TimePicker value={time.start} onChange={onStartChange} format={HHmm} />
      <span>Duration: </span>
      <TimePicker value={time.duration} onChange={onDurationChange} format={HHmm} />
      <span>End: </span>
      <TimePicker value={time.end} onChange={onEndChange} format={HHmm} />
    </div>
  );
}