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

我在组件内设置了一个效果，如果另一个状态属性发生变化，它会更改视图。但由于某种原因，当组件安装时，效果会运行，即使值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>;

};

为什么会发生这种情况？

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

useEffect默认情况下，React Hooks 会在每次渲染时执行，但您可以使用函数中的第二个参数来定义何时再次执行效果。这意味着该函数是always在挂载上执行。根据你的情况，你的第二个useEffect将在开始时运行detailIndex变化。

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

Source:

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