为什么在传入第二个参数时 useEffect() 会无限循环，还有另一种更有效的方法吗？答案

【问题标题】：Why is useEffect() looping endlessly when second argument is being passed in, is there another more effective method?为什么在传入第二个参数时 useEffect() 会无限循环，还有另一种更有效的方法吗？
【发布时间】：2020-10-27 20:12:41
【问题描述】：

当第二组参数传入[] 时，为什么useEffect() 会无限循环？这里的目标是仅在加载时获取props.state.hours.clockedIn 的最后一条记录的状态（仅一次），然后存储该布尔值以在其他地方使用。如果第二个参数没有props.hours 和clocked，那么useEffect 不会得到最后一条记录的值，并且始终是false（在这种特殊情况下应该是true）。如果它们被传入，我可以在 console.log 中看到 .map 函数按预期工作。这里需要使用useEffect()吗？是否有另一种方法可以在加载时仅获取最后一条记录的 clockedIn 值？

const Hours = (props) => {
    const [clocked, setClocked] = useState(false);
    
    useEffect(() => {
        props.fetchHours()
            .then(() => {
                _.map(props.state.hours, (hour) => {
                    setClocked(hour.clockedIn)
                    console.log(clocked)
                })
            })
    }, [props, clocked])

    return (
        <div></div>
    );
};

【问题讨论】：

因为你在useEffect中修改clocked从而触发状态更新，从而重新渲染，从而又一轮useEffect
@ckingchris 您在 useEffect 和 useEffect 中有 clocked 作为依赖项，您正在更改 clocked 变量，这将导致无限循环。您可能应该删除时钟作为依赖项
这能回答你的问题吗？ React hook useEffect runs continuously forever/infinite loop
尝试从依赖数组中删除console.log(clocked)

标签： javascript reactjs setstate use-effect

【解决方案1】：

您使用 setClocked 来更改时钟的值。此外，你已经在 useEffect 的依赖数组中计时，这就是你有一个无限循环的原因。

如果你希望你的 useEffect 只在组件第一次渲染时运行，你需要一个空的依赖数组

const Hours = (props) => {

const [clocked, setClocked] = useState(false);

useEffect(() => {
    props.fetchHours()
        .then(() => {
            _.map(props.state.hours, (hour) => {
                setClocked(hour.clockedIn)
                console.log(clocked)
            })
        })
}, [])

return (
    <div></div>
);

};

【讨论】：

如果第二个参数没有传入，初始状态加载为false，此时最后一条记录的状态为true

【解决方案2】：

如果您需要使用useEffect() 钩子在初始渲染后仅运行一次加载代码，则第二个参数必须是一个空数组，例如：

useEffect(() => {
  props.fetchHours()
      .then(() => {
          _.map(props.state.hours, (hour) => {
              setClocked(hour.clockedIn)
              console.log(clocked)
          })
      })
}, [])

【讨论】：

如果没有传入第二个参数，初始状态加载为false，此时最后一条记录的状态为true