如何在 React 中为慢速网络添加加载程序

Question

我已经创建了一个订阅页面，但在提交页面时并没有像网络速度较慢的人那样进行重定向。有没有一种方法可以在提交按钮上放置一个加载程序来解决这个问题，因为它会稍微破坏用户体验。这就是我的提交功能的样子。

const handleOnSubmit = (e) => {
    e.preventDefault();
    var body = {
      data: {
        name: name,
        email: email,
        contact_number: phone,
        organization: organization,
        designation: designation,
      },
    };

    // Send mailchimp data to lambda
    body = {
      data: {
        ...body.data,
        mailchimp: {
          email_address: email,
          status: newsletter ? "subscribed" : "unsubscribed",
          merge_fields: {
            FNAME: name,
            PHONE: phone,
            MMERGE6: organization,
            JOBTYPE: designation,
            SIGNUPSOUR: Book.fields.contentpieceId,
          },
        },
      },
    };
    setShowModal(false);
    if (window) {
      window.localStorage.setItem("@landing:sub-emai", email);
    }

    console.log(body);

    if (!isDanger) {
      axios
        .post(
          "{API}/prod/api",
          body
        )
        .then((resp) => {
          if (resp.status === 200) {
            window.location.href = `/case-study/${eBook.fields.redirectUrl}`;
          } else {
            setError(true);
          }
        });
    }
  };

Answer 1

我根据您的数据提供了一个可能对您有帮助的示例。我创建了默认值为 false 的状态 loading。在获取数据时将 loading 设置为 true，完成后将 loading 设置为 false。如果 loading 设置为真，它会向您显示微调器。

import React, {useState} from 'react';
import axios from "axios";

export default function MyComponent() {
    const [loading, setIsLoading] = useState(false);

    const handleOnSubmit = (e) => {
        e.preventDefault();
        setIsLoading(true) // data is fetching

        // do your job with axios

        axios.post("{API}/prod/api", "body")
            .then((resp) => {
                if (resp.status === 200) {
                    window.location.href = `/case-study/blw`;
                }
            })
            .catch((e) => console.log(e))
            .finally(function () {
                setIsLoading(false);
            })
    }

    return(
        <div>
            {loading && < Spinner/>}
            <div>
                <button type="submit" name="action">Submit</button>
            </div>
        </div>
    )
}

如何在 React 中为慢速网络添加加载程序

How to add a loader for slow network in React

javascript

http-post

reactjs