嵌套组件中的 Formik 字段未更新

Question

我有以下场景：

• Formik 处理的几个字段的主要组件。 这里一切都很好。
• 在主窗体内部渲染的子组件并使用 Formik 的 Field 组件，与主组件中的字段相同。 这些字段没有得到更新。

主要成分：

...
return (
 <Formik
   enableReinitialize
   initialValues={{
     name: this.state.name,
     newName: this.state.newName, // this field is inside the nested component
   }}
   validationSchema={mySchema}
   onSubmit={...}
 >
   {
     ({ errors, values, ... }) => (
       <Form ref={this.formRef}>
         ...
         <Field name="name" type="text" />
         ...
         <NewNameForm />
       </Form>
     )
   }
 </Formik>
);

NewNameForm 组件：

...
return (
  <div>
    <Field name="newName" type="text" />
  </div>
);

我的方法是错误的，我可以用这样的额外字段嵌套组件吗？ newName更新，所以我显然做错了什么。

Answer 1

我通过将 Formik 的setFieldValue方法传递给子组件的 props 来解决这个问题，如下所示：

onNameChange={(name) => {
  setFieldValue('newName', name);
}}