嵌套组件中的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);
}}