Reactjs Formik表单仅在第二次单击时更新状态

我正在尝试使用Formik制作一个签出表单，但是当我单击submit按钮并将数据记录到控制台时，直到第二次单击，我才看到任何更改

        onSubmit={(values) => {
          addData(values);
          console.log(data);
        }}>

---

此外，当我去更改数据时（我的表单在提交时不会重置），我仍然会看到旧数据，并且它不会更新。

我刚刚传递了它，我可以解决它

它似乎只是在下一次单击时渲染，然后更新

为了解决这个问题，请尝试React-useEffect挂钩。这是我的React-Native示例

import React, { useState, useEffect } from 'react';
import { View, TextInput, Button } from 'react-native';

import { Formik } from 'formik';


export const FormikPub = (props) => {

  const [formikPub, setFormikPub] = useState(
    {foo: '', bar:''}
  )

  useEffect(() => {
    console.log(`After setFormikPub(): ${JSON.stringify(formikPub)}`)
  }, [formikPub]);
 
  return (
    <Formik
      initialValues={{ foo: '', bar: '' }}
      onSubmit={(values) => {
        setFormikPub(values)
      }}
      >
      {({ handleChange, handleBlur, handleSubmit, values }) => (
        <View>
          <TextInput
              name='foo'
              placeholder="Foo"
              onChangeText={handleChange('foo')}
              onBlur={handleBlur('foo')}
              value={values.foo}
          />
          <TextInput
              name='bar'
              placeholder="Bar"
              onChangeText={handleChange('bar')}
              onBlur={handleBlur('bar')}
              value={values.bar}
          />
          
          <Button color="#004686" onPress={handleSubmit} title="Publish Formik" />
        </View>
      )}
    </Formik>
  );
}

import React，{useState，useffect}来自“React”；
从“react native”导入{View，TextInput，Button}；
从'Formik'导入{Formik}；
导出常量FormikPub=（道具）=>{
常量[formikPub，setFormikPub]=useState(
{foo:''，条：'}
)
useffect（（）=>{
log（`After setFormikPub（）：${JSON.stringify（formikPub）}`）
}，[formikPub]）；
返回(
{
setFormikPub（值）
}}
>
{（{handleChange，handleBlur，handleSubmit，values}）=>(
)}
);
}

它可能可以让您按下按钮，并且仅当您更改文本输入时，它才会运行

import React, { useState, useEffect } from 'react';
import { View, TextInput, Button } from 'react-native';

import { Formik } from 'formik';


export const FormikPub = (props) => {

  const [formikPub, setFormikPub] = useState(
    {foo: '', bar:''}
  )

  useEffect(() => {
    console.log(`After setFormikPub(): ${JSON.stringify(formikPub)}`)
  }, [formikPub]);
 
  return (
    <Formik
      initialValues={{ foo: '', bar: '' }}
      onSubmit={(values) => {
        setFormikPub(values)
      }}
      >
      {({ handleChange, handleBlur, handleSubmit, values }) => (
        <View>
          <TextInput
              name='foo'
              placeholder="Foo"
              onChangeText={handleChange('foo')}
              onBlur={handleBlur('foo')}
              value={values.foo}
          />
          <TextInput
              name='bar'
              placeholder="Bar"
              onChangeText={handleChange('bar')}
              onBlur={handleBlur('bar')}
              value={values.bar}
          />
          
          <Button color="#004686" onPress={handleSubmit} title="Publish Formik" />
        </View>
      )}
    </Formik>
  );
}