React Forms: обновление пользовательского интерфейса на основе ответа на вызов GET Axios в withFormik ()

Question

Я использую withFormik() для создания формы в моем приложении Gatsby.

В настоящее время я выполняю GET-вызов, используя axios в функции withFormik() handleSubmit(). Получив ответ, я смогу обновить его в пользовательском интерфейсе.

Проблема здесь в том, что данные обновляются в пользовательском интерфейсе после двух щелчков по кнопке «Поиск» вместо обновления сразу после щелчка.

Может ли кто-нибудь помочь и сообщить мне, что я здесь делаю не так? Извиняюсь, если вопрос звучит глупо.

Вот выдержка из моего кода.

import React from "react"
import { withFormik, Form, Field } from "formik"
import axios from "axios"

const FormComponent = ({ values, errors }) => (
  <div>
    <Form>
      <label># </label>
      <Field className="HashtagInput" type="text" name="hashtag" />
      <button className="SearchBtn" type="submit"></button>
    </Form>
    <p className="SearchResult">{values.hashtagSearchResult}</p>
  </div>
)

const FormikApp = withFormik({
  mapPropsToValues() {
    return {
      hashtag: "",
      hashtagSearchResult: [], // 
    }
  },
  handleSubmit(values) {
    console.log("$ Search button clicked!")
    let hashtag = values.hashtag
    let hashtagResult = []
    let url = "https://jsonplaceholder.typicode.com/todos/" + hashtag + "/"
    axios.get(url).then(res => {
      let hashtags = searchHashtags(res.data)
      ...
      console.log("$ Hashtag result - " + hashtagResult)
      values.hashtagSearchResult = hashtagResult;
    })
    ...
})(FormComponent)

Answer 1

Внесены небольшие изменения в ваш код: @ Pavan

Главное, что я сделал, это использовал setSubmitting (true);

Я также добавляю onSubmit = {handleSubmit} в форму

import React from "react";
import ReactDOM from "react-dom";
import { withFormik, Form, Field } from "formik";
import axios from "axios";

const FormComponent = ({ values, errors, handleSubmit }) => (
  <div>
    <Form onSubmit={handleSubmit}>
      <label># </label>
      <Field className="HashtagInput" type="text" name="hashtag" />
      <button className="SearchBtn" type="submit">
        search
      </button>
    </Form>
    <p className="SearchResult">{values.hashtagSearchResult.toString()}</p>
  </div>
);

const FormikApp = withFormik({
  mapPropsToValues() {
    return {
      hashtag: "",
      hashtagSearchResult: [] //
    };
  },
  async handleSubmit(values, { setSubmitting }) {
    console.log("$ Search button clicked!");
    let hashtag = values.hashtag;

    setSubmitting(true);
    let url = "https://jsonplaceholder.typicode.com/todos/" + hashtag + "/";
    const c = await axios.get(url);

    console.log("$ update");
    values.hashtagSearchResult = [...values.hashtagSearchResult, c.data.title];

    setSubmitting(false);
  }
})(FormComponent);

const rootElement = document.getElementById("root");
ReactDOM.render(<FormikApp />, rootElement);

https://codesandbox.io/s/brave-lake-p8cf2