时间戳

首页 > 解决方案 > Formik Form 仅在第二次单击时更新状态

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

问题描述

我正在尝试使用 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',
      },
    ],
  });

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

标签： reactjsformsreact-nativeformik

解决方案

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

似乎它只在下次单击时呈现，然后更新。

为了解决这个问题，请尝试 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>
  );
}

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

推荐阅读