时间戳

首页 > 解决方案 > 创建按钮加载状态

javascript - 创建按钮加载状态

问题描述

我有一个执行 API 调用的按钮。我想在加载数据时显示加载状态

这就是他们在反应文档中处理网络请求的方式

function simulateNetworkRequest() {
  return new Promise(resolve => setTimeout(resolve, 2000));
}

这就是我需要的

  function simulateNetworkRequest () {
    return new Promise(axios.post('http://localhost:5000/'))
  }

但它会抛出这个错误：

类型错误：axios__WEBPACK_IMPORTED_MODULE_1___default.a.post(...) 不是函数

标签： javascriptreactjs

解决方案

如果你想要一个改变他状态的按钮，你可以像这样使用

import * as React from "react";
import axios from "axios";

export default function App() {
  const [isLoading, setIsLoading] = React.useState(false);
  const handleClick = () => {
    setIsLoading(true);
    axios
      .post("http://localhost:5000/")
      .then(response => {
        setIsLoading(false);
        //set some data from response
      })
      .catch(error => {
        setIsLoading(false);
        //handle error
      });
  };

  return (
    <div className="App">
      <button type="button" onClick={() => handleClick()}>
        {isLoading ? `Loading` : `get data`}
      </button>
    </div>
  );
}

推荐阅读