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

我有一个叫做employee.js的组件。我使用此组件创建员工和更新员工。 我管理一个名为

isUpdate

的状态

在

useffect

hook的帮助下，我更改

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

这是我的

useffect

hook代码。请注意控制台日志“第1行”、“第2行”和“初始值”一条

我的问题是，即使在

第1行之前也会打印初始值。所以在那个时候，初始值是空的。但这些值设置为formik格式。即使在初始值更改之后，它也不会反映在UI中

我来自vuejs世界，是一个新的反应者。在vuejs中，它创建了生命周期挂钩。它比任何东西都重要。在这里，组件似乎在useffect挂钩之前就已经加载了

如何在react world中修复此问题？
useffect
在创建DOM并将渲染提交到屏幕后运行。因此，如果要在渲染之前执行某些操作，则需要查看
useLayoutEffect
。大多数情况下，
useffect
是您所需要的，您只需要考虑异步数据流

useffect
将运行每个渲染，除非提供依赖项数组。如果提供依赖项数组，
useffect
将仅第一次运行，并且每次值数组更改时（不是数组本身，因为它的内存地址通常会更改每个渲染）。我相信这只是一个肤浅的比较，所以在使用依赖项列表中的对象时要小心（mutable.js非常适合）

有了这两条信息，您就可以明白为什么您的代码有点奇怪了

使用要运行的函数调用
useffect
，调用的依赖项列表为
[props.state.location，console.log（…）]
，这意味着
useffect
将第一次运行，并且在
props.state.location
更改的任何时间运行。它看起来像是一个对象，所以每当对象的内存地址改变时。第二个参数总是未定义的，因此在这种情况下并不真正有用

调用日志发生在
useffect
函数运行之前。这是有意义的，因为它是
useffect
的一个参数，在调用
useffect
方法之前必须对参数进行评估

让我们重新审视你的问题。听起来像是在使用一种叫做Formik的东西，它被设置为
initialValues
，但是它发生在第一次渲染之后，不会触发新的渲染吗？我需要看到更多与
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); 

您可以显示整个组件或更多组件吗？我假设您正在记录
initialValues
，只是为了检查它是什么…但是您正在依赖项数组中执行它。为什么？另外，什么是
initialValues
，它在哪里使用？useffect钩子中的第二个参数不应该这样使用。这就是依赖关系数组，它只对特定状态或属性的更改作出反应。不要把
console.log
放在那里