Question

我正在使用Formik处理我的应用程序中的表单。使用useRef，我设法在Formik之外调用Formik道具。

const form = useRef(null);
const formProps = form.current;

useEffect(() => {
    getUser(props.match.params.userId)
}, []);

console.log(formProps)

<Formik
  ref={form}
  initialValues={userData}
  validationSchema={validationSchema}
  onSubmit={handleSubmit}>
     {props => (
          <Form>

           </Form>
      )}
</Formik>

我从URL获取userId，并从服务器获取该用户并将其保存在redux存储中。然后将该数据设置为Formik的初始值。从其他视图中导航时，我使用以下方法：

  props.history.push(`users/${userId}/update`);

控制台日志记录为空，并且当我刷新页面时，我得到结果Formik {}。不知道为什么我得到的结果为null，也许会导致它在Formik准备就绪之前触发？

Answer 1

这是功能组件，因此我们的代码逐行执行。

我们的函数首先运行：const form = useRef(null);，然后运行const formProps = form.current;。然后，用未初始化的console.log(formProps)（等于form.current）运行null。当组件的功能以<Formik/> JSX表示形式到达/执行行时，我们的ref对象将获得参考/值。

Console.log()在首次重新呈现组件后打印Formik参考值（因此，当我们更改状态，道具或有时刷新页面时（取决于组件的定义方式和位置）。

如何检查formik是否已初始化并准备就绪？

1 个答案: