Formik回傳舊值狀態

我在使用 Formik 進行異步狀態管理時遇到了這個問題。我需要根據輸入的變化動態顯示結果，但我每次都會得到舊狀態。你知道解決方法嗎？我需要使用Field組件中的更改來更新結果狀態。

這是我的代碼：

 function Simulator() {
  const [result, setResult] = useState(undefined);

  const LeasingSchema = Yup.object().shape({
    monthDuration: Yup.number()
      .min(6, "6 months minimum")
      .max(48, "48 months maximum")
      .required("Required"),
    amountFinanced: Yup.number()
      .min(10000, "The minimum finance is 10.000€")
      .max(100000, "The maximum finance is 100.000€")
      .required("Required")
  });

  const handleCalculation = (values, errors) => {
    const { monthDuration, amountFinanced } = values;

    if (monthDuration && amountFinanced && Object.keys(errors).length === 0) {
      //Round number
      const roundedValue = parseFloat(amountFinanced / monthDuration).toFixed(
        2
      );
      return setResult(roundedValue);
    } else {
      return setResult(undefined);
    }
  };

  return (
    <div className={styles.leasing}>
      <h1>Leasing simulator:</h1>

      <Formik
        initialValues={{
          monthDuration: "",
          amountFinanced: ""
        }}
        validationSchema={LeasingSchema}
        onSubmit={(values) => console.log(values)}
      >
        {({ errors, touched, values, handleChange }) => (
          <Form>
            <label htmlFor="form-monthly-duration">Monthly duration:</label>
            <Field
              type="number"
              name="monthDuration"
              placeholder="Months"
              id="form-monthly-duration"
              onChange={(e) => {
                handleChange(e);
                handleCalculation(values, errors);
              }}
            />
            {result && (
              <>
                <label htmlFor="result">Monthly fee:</label>
                <p>{result}</p>
              </>
            )}
            <button type="submit">Submit</button>
          </Form>
        )}
      </Formik>
    </div>
  );
}

export default Simulator;

uj5u.com熱心網友回復：

中的值handleCalculation永遠不會更新，因為您使用的是受控組件。表單資料必須按狀態更新。

1. 要按狀態更新，請將您的設定result為

const [result, setResult] = useState({
    monthDuration: 0,
    amountFinanced: <any number between 10000 to 100000>,
});

2. 然后initialValues在Formik組件中設定為

initialValues={result}

完整代碼在這里：

const Simulator = () => {
    const [result, setResult] = useState({
        monthDuration: 0,
        amountFinanced: 10000,
    });

    const LeasingSchema = Yup.object().shape({
        monthDuration: Yup.number()
            .min(6, "6 months minimum")
            .max(48, "48 months maximum")
            .required("Required"),
        amountFinanced: Yup.number()
            .min(10000, "The minimum finance is 10.000€")
            .max(100000, "The maximum finance is 100.000€")
            .required("Required")
    });

    const handleCalculation = (values, errors) => {
        const { monthDuration, amountFinanced } = values;

        if (monthDuration && amountFinanced && Object.keys(errors).length === 0) {
            setResult({
                monthDuration: monthDuration,
                amountFinanced: amountFinanced,
            });
        }
    };

    return (
        <div>
            <h1>Leasing simulator:</h1>

            <Formik
                initialValues={result}
                validationSchema={LeasingSchema}
                onSubmit={(values) => console.log(values)}
            >
                {({ errors, values, handleChange, handleSubmit }) => (
                    <Form onSubmit={handleSubmit}>
                        <label htmlFor="form-monthly-duration">Monthly duration:</label>
                        <Field
                            type="number"
                            name="monthDuration"
                            placeholder="Months"
                            id="form-monthly-duration"
                            onChange={(e) => {
                                handleChange(e);
                                handleCalculation(values, errors);
                            }}
                        />
                        {(result.monthDuration || result.amountFinanced) && (
                            <>
                                <label htmlFor="result">Monthly fee:</label>
                                <p>{(values.amountFinanced / values.monthDuration).toFixed(2)}</p>
                            </>
                        )}
                        <button type="submit">Submit</button>
                    </Form>
                )}
            </Formik>
        </div>
    );
};

export default Simulator;

您也可以return在設定狀態時洗掉，因為它是不必要的。您可以在 React 生命周期檔案中找到更多資訊。

標籤：反应 形式 形式

上一篇：Javascript-如果復選框處于活動狀態，則顯示不同的內容

下一篇：輸入型別號的最大長度