警告 'React hook useEffect has a missing dependency'

Question

在 React 应用程序中，我在 useEffect 函数的几个组件上收到此警告。我已经看到其他 SO 问题，但仍然看不到修复。

React Hook useEffect 缺少依赖项：'digiti' 和 'time'。包括它或删除依赖数组

const GenerateNumber = (props) => {
    const [number, setNumber] = useState(0);
    // add side effect to component
    useEffect(() => {
        const interval = setInterval(
            () => setNumber(Math.floor(Math.random() * 9 + 1)),
            50
        );

        setTimeout(() => { clearInterval(interval); setNumber(props.digiti); }, props.times * 100);

    }, []);

    return (
        <span className='digit'>{number}</span>
    );
}

Answer 1

这是 react hooks exhaustive deps 解释的内容。一般来说，你的依赖数组应该包括依赖数组中使用的所有值，但是当你使用 setNumber 之类的东西这样做时，你的 useEffect 钩子将运行无限地随着 setNumber 触发器的每次变化一个新的渲染（每个新的渲染都会触发 setNumber，看到那里的问题了吗？）。

你的实际错误，digiti 和 times 的属性值旨在你将这两个值添加到依赖数组，这将使 useEffect 挂钩到运行每次这些道具改变时都要再次。这是否是预期的行为取决于您。

依赖数组文档中实际记录的是将数组留空以使 useEffect 挂钩运行恰好一次的预期行为。

警告 'React hook useEffect has a missing dependency'

Warning 'React hook useEffect has a missing dependency'

reactjs

react-hooks

react-effects