Formik 中的初始值未显示

Question

我创建了一个单独的组件，它将在其中呈现一张带有表单的卡片。我使用 Formik API 来处理它。这是我的代码。

function ParentComponent(){
    return (
        <View>
            <ChildComponent someDataFromApi={details}/>
        </View
    )
}

import { Formik } from "formik";
import * as Yup from "yup";

function ChildComponent(){
const someSchema={
    firstName: Yup.string().required().label("First Name"),
    lastName: Yup.string().required().label("Last Name"),
}
return (
   <Formik
       initialValues={first_name: details.first_name, last_name: details.last_name, }
       validationSchema={someSchema}
       onSubmit={(values) => console.log(values)}
   >
       <Field label={"First Name"} name="firstName">
       <Field label={"Last Name"} name="lastName">
   </Formik>
}

我不知道为什么它不显示字段的 initialValues，我尝试在控制台记录它并且它 returns 正确的值意味着它已经从 initialValues 捕获数据，它只是没有在现场展示它。

Answer 1

initialValues 通过 the documentation 中提供的道具传递。这是一个最小的工作示例。

import React from 'react';
import { Text, View, StyleSheet, SafeAreaView } from 'react-native';

import { Formik, Field } from "formik";

function ParentComponent() {
    return (
        <View>
            <ChildComponent someDataFromApi={{details: {
              first_name: "Hello",
              last_name: "World"
            }}}/>
        </View>
    )
}

function ChildComponent(props) {
    const details = props.someDataFromApi

   return <View>
        <Formik
            initialValues={details}
            onSubmit={() => {}}
        >
          {(props) => {
              return <View>
                <Field
                    value={props.values.details.first_name}
                />
              </View>
          }}
        </Formik>
      </View>
}


export default function App() {
  return (
    <View style={{margin: 20}}>
      <ParentComponent></ParentComponent>
    </View>
  );
}

Formik 中的初始值未显示

Initial values in Formik aren't showing

forms

reactjs

react-native

yup

formik