React Hooks - 即使状态没有改变，useEffect 也会触发

Question

我在我的组件中设置了一个效果，如果另一个状态属性发生变化，它会改变视图。但是由于某种原因，当组件挂载时，效果会运行，即使 detailIndex 的值没有改变。

 const EventsSearchList = () => {
    const [view, setView] = useState('table');
    const [detailIndex, setDetailIndex] = useState(null);

    useEffect(() => {
        console.log('onMount', detailIndex);
        // On mount shows "null"
    }, []);

    useEffect(
        a => {
            console.log('Running effect', detailIndex);
            // On mount shows "null"!! Should not have run...
            setView('detail');
        },
        [detailIndex]
    );

    return <div>123</div>;

};

为什么会这样？

更新：如果不清楚，我正在尝试在组件更新时运行效果，因为 detailIndex 发生了变化。不是在安装时。

原文由 Enrique Moreno Tent 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

useEffect 来自 React Hooks 的默认情况下在每次渲染时执行，但您可以使用函数中的第二个参数来定义何时再次执行效果。这意味着该函数 始终 在挂载时执行。在您的情况下，您的第二个 useEffect 将在启动时运行，并且当 detailIndex 更改时。

更多信息： https ://reactjs.org/docs/hooks-effect.html

资源：

有经验的 JavaScript 开发人员可能会注意到，传递给 useEffect 的函数在每次渲染时都会有所不同。 […] 如果某些值在重新渲染之间没有改变，你可以告诉 React 跳过应用效果。为此，请将数组作为可选的第二个参数传递给 useEffect：[…]

原文由 r g 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在我的例子中，即使我在 useEffect() 中使用了第二个参数，组件也一直在更新，我正在打印参数以确保它没有改变并且 它没有改变。问题是我正在使用 map() 渲染组件，并且在某些情况下键发生变化， 如果键发生变化，对于反应，它是一个完全不同的对象。

原文由 Baroudi Safwen 发布，翻译遵循 CC BY-SA 4.0 许可协议