React Native 未显示Formik中的初始值

jhkqcmku 于 2023-05-01 发布在 React

关注(0)|答案(2)|浏览(138)

我已经创建了一个单独的组件，它将在其中呈现一张卡片与形式。我用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，我试着在控制台记录它，它返回正确的值意味着它已经捕获了initialValues的数据，它只是不显示在字段中。

react-native

来源：https://stackoverflow.com/questions/71497962/initial-values-in-formik-arent-showing

2条答案

按热度按时间

r3i60tvu1#

initialValues通过the documentation中提供的props传递。下面是一个最小的工作示例。

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>
  );
}

赞(0）回复(0）举报 2023-05-01

5us2dqdw2#

我认为代码中的字段名称和initialValues参数应该是相同的。