reactjs - 如何使用 Formik 将我的 initialValues 传递给子组件以使用react？

Question

我知道这个问题可能看起来很基础，但我正在学习 React 和 Formik。我正在尝试构建一个表单组件，用户可以在其中根据需要动态添加新输入。这存储在将导入到“调查”组件中的“名称”组件中。

似乎 Names 组件没有从 initialValues 获取值，因为这是我收到的错误。

./src/components/Names.js

Line 20:12:  'values' is not defined  no-undef

Search for the keywords to learn more about each error.

我试过将它们作为 props 传递下去，但它似乎并没有识别它。

调查组件看起来像这样

import React, { Component } from 'react';
import { Formik, Field, Form, ErrorMessage, FieldArray } from 'formik';
import * as Yup from 'yup';
import Names from './Names'


const Survey = () => {
  return (
    <Formik
      initialValues={{
        names: [{firstName: '', lastName: '', middleName: '', id: "" + Math.random()}]
       }}
      validationSchema={Yup.object({
        firstName: Yup.string()
          .max(15, 'Must be 15 characters or less'),

        lastName: Yup.string()
          .max(20, 'Must be 20 characters or less')
      })}
      onSubmit={(values, { setSubmitting }) => {

        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
        }, 500)

      }}
    >
    {({ values, errors, isSubmitting }) => (
      <Form>
        <Names values={values}/>
        <button type="submit">Submit</button>
      </Form>
    )}

    </Formik>
  )

}



export default Survey;

这是名称组件

import React, { Component } from 'react';
import { Formik, Form, useField, FieldArray } from 'formik';
import * as Yup from 'yup';
import InputField from './InputField'

const Names = (props) => {
  return (
    <>
    <FieldArray name="names">
      {(arrayHelpers) => (
        <div>
          <button onClick={() =>
            arrayHelpers.push({
              firstName: '',
              middleName: '',
              lastName: '',
              id: "" + Math.random()
            })
          }>Add a Name</button>
//NOT BEING RECOGNIZED
          {values.names.map((name, index) => {
            return (
              <div key={name.id}>
                <InputField
                  label="First Name"
                  name={`names.${index}.firstName`}
                  type="text"
                  placeholder="Enter Your First name"/>
                <InputField
                  label="Middle Name"
                  name={`names.${index}.middleName`}
                  type="text"
                  placeholder="Enter Your Middle name"/>
                <InputField
                  label="Last Name"
                  name={`names.${index}.lastName`}
                  type="text"
                  placeholder="Enter Your Last name"/>
                  <button onClick={() => arrayHelpers.remove(index)}>Remove name</button>
              </div>
            );
          })}
        </div>
      )}
    </FieldArray>

    </>
  );
};

export default Names;

我也试过把它传下来values.names从 Survey 组件，然后在我写的 Name 组件中this.props.values.map但这也没有用。

如有任何帮助，我们将不胜感激。提前致谢!

Answer 1

好的，我找到了答案。

应该是

props.values.map

因为我将其作为“ Prop ”传递下去。这就是为什么只有“值(value)观”是行不通的。