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>;

};

为什么会这样?

更新:如果不清楚,我正在尝试的是在组件因detailIndex更改而更新时运行效果不是在安装时。

rg

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

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

来源:

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

React Hooks useState + useEffect + event给出陈旧状态

与useEffect配合使用时,如何防止useCallback触发(并遵守eslint-plugin-react-hooks)?

使用React Hooks,为什么我的事件处理程序以错误的状态触发?

React Hooks useEffect,添加依赖项触发无限循环

React Hooks:在useEffect中获取数据

有没有使用useEffect进行无限滚动的实现,而不会触发react-hooks / exhaustive-deps皮棉警告?

react hooks(useEffect)无限循环说明

带有React Hooks的HoC

React Hooks表单验证OnBlur会触发所有字段,而不仅仅是特定字段

带有React && Hooks的IntersectionObserver

使用React和Redux Hooks,为什么我的动作没有触发?

Firebase和React Hooks(useState和useEffect)

我的状态没有使用React Hooks更新

具有React Hooks的动态状态

useEffect EventListener问题REACT HOOKS

React Hooks,状态未更新

即使内部值没有改变,组件 getter 也会触发重新渲染

React Hooks 会取代类吗?

如何在 React Hooks 中触发从子级到父级的状态变化?

为什么使用 React Hooks、MomentJS 对象和间隔/超时更新状态不会触发重新渲染?

如果任何状态发生变化,为什么 React Hooks 会更新所有子组件?

即使状态没有改变,React 组件在重新渲染时也会创建一个新的状态实例

即使数据没有改变,react redux useSelector 也会重新渲染

useEffect .map 不是函数 React Hooks

React Hooks-useEffect 和 onClick 问题

React Hooks:状态未在函数中更新

搜索栏触发但没有任何更改生效 - React Hooks

React Hooks:useEffect Hook 中的值没有改变

React useEffect 没有被触发