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

Question

我正试图使用Formik制作结账表单，但当我单击提交按钮并将数据记录到控制台时，直到第二次单击时，我才看到任何更改。

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

const addData = (billing) => {
setData((currentData) => {
const shipping = {
first_name: billing.first_name,
last_name: billing.last_name,
address_1: billing.address_1,
address_2: billing.address_2,
city: billing.city,
state: billing.state,
postcode: billing.postcode,
country: billing.country,
};
return {billing, shipping, ...currentData};
});
};
const [data, setData] = useState({
payment_method: 'bacs',
payment_method_title: 'Direct Bank Transfer',
set_paid: true,
line_items: [
{
product_id: 93,
quantity: 2,
},
{
product_id: 22,
variation_id: 23,
quantity: 1,
},
],
shipping_lines: [
{
method_id: 'flat_rate',
method_title: 'Flat Rate',
total: '10',
},
],
});

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

Answer 1

我刚刚通过了它，我可以解决它！

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

为了解决这个问题，请尝试React useEffect Hook。这是我的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>
);
}

它可以让你按下按钮，只有当你更改文本输入时才会运行。