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

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 形式。 即使在初始值更改后，它也不会反映在 UI 中。

我来自 vuejs 世界，刚开始反应。 在 vuejs 中，它创建了生命周期钩子。 它在任何事情之前运行。 这里的组件似乎在 useEffect 钩子之前加载。

我怎样才能在反应世界中解决这个问题？

Answer 1

useEffect在创建 DOM 并且渲染已提交到屏幕后运行。 所以如果你想在渲染之前做一些事情，你会想看看useLayoutEffect 。 大多数时候， useEffect是你所需要的，你只需要考虑异步数据流。

除非您提供依赖项数组，否则useEffect将运行每个渲染。 如果你提供一个依赖数组， useEffect只会在第一次运行，并且每次值数组改变时（不是数组本身，因为它的内存地址通常会在每次渲染时改变）。 我相信它执行的是浅层比较，因此您需要小心使用依赖项列表中的对象（mutable.js 对此非常有用）。

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

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

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

让我们重新审视你的问题。 听起来您正在使用一种叫做 Formik 的东西，它被设置在initialValues但是它发生在第一次渲染之后，并且不会触发新的渲染？ 我需要查看更多与initialValues相关的代码，但这是我的猜测。 您可能直接在initialValues上设置一个值，而不是通过useState来useState 。 React 需要知道何时重新渲染组件，它通过监听setState调用来实现。 它不会像 Mobx 或 VueJS 那样做聪明的魔法东西，因此当您更改 state 某处的属性时，它无法神奇地重新渲染自己。

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