如何在Formik组件外部获取Formik values值？

问题原因 #

你遇到的错误是因为在JSX渲染区域直接写了{(checkData = values)}——这行代码会把赋值结果（也就是整个values对象）当成React子元素去渲染，但React不支持直接渲染对象，所以抛出了报错。而且这种赋值方式的作用域只在当前map循环里，根本没法在Formik外部拿到values。

正确实现方案 #

要在Formik外部获取表单值，推荐两种常用方法：

方法1：使用useFormik Hook（函数组件推荐） #

直接用useFormik创建表单实例，整个组件内都能直接访问values：

import { useFormik } from 'formik';

function YourForm() {
  // 初始化表单实例
  const formik = useFormik({
    initialValues: {
      correctAnswers: [{ correctAnswer: '' }]
    },
    onSubmit: (values) => {
      console.log('提交的表单值：', values);
    }
  });

  // 这里是Formik"外部"（组件内任意位置），直接访问formik.values即可
  console.log('实时表单值：', formik.values);

  return (
    <form onSubmit={formik.handleSubmit}>
      {formik.values.correctAnswers.map((answer, index) => (
        <div className="test-field" key={index}>
          <input
            className="test-field-input"
            type="text"
            name={`correctAnswers.${index}.correctAnswer`}
            value={formik.values.correctAnswers[index].correctAnswer}
            onChange={formik.handleChange}
          />
        </div>
      ))}
      <button type="submit">提交</button>
    </form>
  );
}

方法2：通过onChange同步到组件状态（Formik组件包裹场景） #

如果用的是Formik组件包裹写法，可通过组件状态同步表单值：

import { useState } from 'react';
import { Formik, Form, Field } from 'formik';

function YourForm() {
  // 声明状态存储表单值
  const [formValues, setFormValues] = useState({
    correctAnswers: [{ correctAnswer: '' }]
  });

  return (
    <>
      {/* 这里是Formik外部，直接使用formValues */}
      <div>当前表单值：{JSON.stringify(formValues)}</div>
      
      <Formik
        initialValues={formValues}
        onSubmit={(values) => {
          console.log('提交的表单值：', values);
        }}
        onChange={(values) => {
          // 每次表单值变化时同步到组件状态
          setFormValues(values);
        }}
      >
        {({ values }) => (
          <Form>
            {values.correctAnswers.map((answer, index) => (
              <div className="test-field" key={index}>
                <Field
                  className="test-field-input"
                  type="text"
                  name={`correctAnswers.${index}.correctAnswer`}
                />
              </div>
            ))}
            <button type="submit">提交</button>
          </Form>
        )}
      </Formik>
    </>
  );
}

先修复当前错误 #

你现有代码里的{(checkData = values)}这行完全是错误写法，直接删掉就能解决渲染报错。

内容的提问来源于stack exchange，提问作者Dante1021