formik渲染道具已被弃用，并将在以后的版本中弃用

如何解决formik渲染道具已被弃用，并将在以后的版本中弃用

我刚刚开始使用formik，并且我正在使用旧的代码库编写一些代码。有了这段代码，我得到这个错误：

            <Formik
              enableReinitialize={true}
              initialValues={InitialValues}
              onSubmit={(formData,formikProps) => this.handleSubmit(formData,formikProps)}
              render={formikProps => (
                  <View>
                      <FieldArray
                    name="address"
                    render={arrHelpers => (
                      <View>
                         
                        {formikProps.values.address &&
                          formikProps.values.address.length > 0 &&
                          formikProps.values.address.map((item,index) =>
                            this.renderForm(item,index,arrHelpers,formikProps)
                          )}
                      </View>
                    )}
                  />
                  <TouchableOpacity  onPress={formikProps.handleSubmit} style ={styles.buttonDown}>
                   <Text style={styles.submitButton}>Submit</Text>
                 </TouchableOpacity>
                  </View>
              )}
            />

解决方法

查看以下内容：https://formik.org/docs/migrating-v2#all-render-props-have-been-deprecated-with-a-console-warning

代替使用渲染道具，您可以将渲染函数作为子代传递（如上面的链接所示）：

- <Field name="firstName" render={props => ....} />
+ <Field name="firstName">{props => ... }</Field>

仅关闭<Formik> ...props... </Formik>中的标签，而不放入Formik中的open标签。之后请注意，因为您不需要更多的“ render =“，而需要将“道具”放在括号内。

喜欢这个...

<Formik         
 enableReinitialize={true}
 initialValues={InitialValues}
 onSubmit={(formData,formikProps) => this.handleSubmit(formData,formikProps)}>
      {({formikProps}) => (
       <View>
          <FieldArray
           name="address"
           {({arrHelpers}) => (
              <View>                         
                {formikProps.values.address &&
                  formikProps.values.address.length > 0 &&
                  formikProps.values.address.map((item,index) =>
                    this.renderForm(item,index,arrHelpers,formikProps)
                  )}
              </View>
            )}
          />
          <TouchableOpacity  onPress={formikProps.handleSubmit} style={styles.buttonDown}>
           <Text style={styles.submitButton}>Submit</Text>
         </TouchableOpacity>
          </View>
      )}
 </Formik>

对于字段，使用与之前答案相同的方式。

在简历中，只需替换

<Formik render={(props) => ...} />   to   <Formik>{(props) => ...}</Formik>

另一个示例（更简单）：

<Formik 
  
  onSubmit={onSubmit} 
  
  initialValues={{
      name: '',email: ''
    }}
    >
              
    {({ values }) => (
      <div className="container">
        <h1>Formulário Formik de exemplo</h1>
        <Form>
          <div>
            <label>Nome</label>
            <Field name="name" type="text" />
          </div>
          <div>
            <label>Email</label>
            <Field name="email" type="email" />
          </div>
          <button className="btnSubmit" type="submit">Save</button>
        </Form>
      </div>
    )}
 </Formik>

在此链接中：enter link description here，您可以获取有关此文件的文档。