Question

我有一个名为employee.js的组件。我使用此组件创建员工并更新员工。我管理的状态为isUpdate。

借助useEffect钩子，我更改了isUpdate=true。这意味着该组件可以作为更新组件。 isUpdate的默认值为false。

我使用formik进行验证。

useEffect(() => {
        if (props.location.state && props.location.state.update) {
            // update
                        
            console.log('line 1')
            
            getEmp(props.location.state.id);
            
            console.log('line 2')
        }
    }, [props.location.state, console.log('initial values', initialValues)]);

这是我的useEffect钩子代码。请注意控制台日志中的“第1行”，“第2行”和“初始值”分别为一个。

我的问题是，甚至在line 1之前都打印了初始值。因此，那时初始值是空的。但是这些值设置为formik形式。即使更改了初始值，它也不会反映在用户界面中。

我来自vuejs世界，并且是新来的。在vuejs中，它创建了生命周期挂钩。它先于任何事物运行。在这里，组件似乎甚至在useEffect钩子之前就已加载。

如何在反应世界中解决这个问题？

Answer 1

useEffect在创建DOM并将渲染提交到屏幕后运行。因此，如果您想在渲染之前做一些事情，则需要查看useLayoutEffect。在大多数情况下，useEffect是您所需要的，您只需要考虑异步数据流。

除非您提供依赖项数组，否则

useEffect将运行每个渲染。如果提供依赖项数组，useEffect将仅在第一次运行，并且每次该值数组发生更改时（而不是数组本身，因为其内存地址通常会在每次渲染时更改）。我相信它会进行比较浅的比较，因此您在使用依赖项列表中的对象时要格外小心（mutable.js对此非常有用）。

利用这两条信息，您可以了解为什么您的代码有点奇怪。

您调用useEffect并具有要运行的功能和一个[props.state.location, console.log(...)]的依赖项列表，这意味着useEffect将在第一次运行且props.state.location随时更改。它看起来像是一个对象，因此只要该对象的内存地址发生变化。第二个参数将始终是未定义的，因此在这种情况下并没有真正的用处。

您指出日志在useEffect函数运行之前发生。这是有道理的，因为它是useEffect的参数，并且必须在调用useEffect方法之前评估参数。

让我们重新讨论您的问题。听起来您正在使用initialValues上设置的名为Formik的东西，但是它是在第一次渲染之后发生的，并且不会触发新的渲染吗？我需要查看更多与initialValues相关的代码，但这是我的猜测。您可能直接在initialValues上设置了一个值，而不是通过useState来设置它。 React需要知道何时重新渲染组件，它通过监听setState调用来做到这一点。它不执行Mobx或VueJS之类的灵巧魔法物品，因此，当您在状态上的某个位置更改属性时，它无法魔术般地重新渲染自身。

// Creates a state variable called isUpdate and initializes it to false.
// On re-renders, it provides isUpdate with whatever value its been updated to
const [isUpdate, setIsUpdate] = useState(false);

// Sometime in the future

// changes state and causes a component to re-render
setIsUpdate(true);

在useState设置默认值之前，React.js运行useEffect

1 个答案: