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

Question

我在组件内设置了一个效果，如果另一个状态属性发生变化，该效果会更改 View 。但由于某种原因，当组件挂载时，即使 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 发生了变化。不是在安装时。

Answer 1

默认情况下，React Hooks 中的

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

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

来源:

Experienced JavaScript developers might notice that the function passed to useEffect is going to be different on every render. [...] You can tell React to skip applying an effect if certain values haven’t changed between re-renders. To do so, pass an array as an optional second argument to useEffect: [...]