javascript - React - 在已分配功能的单击上显示加载程序

Question

我已经在三元运算符中创建了一个点击事件，该事件从我的 API 发出 GET 请求。单击按钮时，按钮消失，数据文本取代按钮(按钮消失)。但是获取请求和文本显示之间有一个很小的时间间隔。我想在那一刻放置某种加载消息，以便用户知道正在发生某些事情。但似乎无法弄清楚。这是我的代码:

import React, {Component} from "react";
import axios from "axios";


export default class FoodData extends React.Component {
constructor(props) {
    super(props);
    this.state = {
        meal: '',
        clicked: false,
        isLoaded: false,
    }
    this.handleClick = this.handleClick.bind(this);
}

handleClick() {
    this.setState({
        clicked: true,
    });
}

fetchData() {
    axios.get('api/menu/food')
        .then(res => {
            const meal= `${res.data.starters},${ res.data.price}`;
            this.setState({
                meal: meal,
                isLoaded: true
            })
            console.log(meal)
        })
};

   combinedFunction() {
    this.fetchData();
    this.handleClick();
}

 render(){
   const {isLoaded, meal} = this.state;

 return (
    <div >
          Dish: {
            this.state.clicked ? (
            this.state.menu
           ) : (
            <button onClick={() => {  this.combinedFunction() }}>Find Dish</button>
          )}
      </div>
    );
  }
}

感谢您的帮助。

Answer 1

您可以做的是添加“isLoading”状态并将值放在 API 调用之前和之后，如下所示:

fetchData() {
    this.setState({isLoading: true});
    axios.get('api/menu/food')
        .then(res => {
            const meal= `${res.data.starters},${ res.data.price}`;
            this.setState({
                meal: meal,
                isLoaded: true
                isLoading: false,
            })
            console.log(meal)
        })
};

并在渲染中使用它来显示“加载图标”

render(){
   const {isLoaded, meal, isLoading } = this.state;

 return (
    <div >
          {isLoading ? <div>loading</div> :
            Dish: {
              this.state.clicked ? (
              this.state.menu
             ) : (
              <button onClick={() => {  this.combinedFunction() }}>Find Dish</button>
            )}
          }
      </div>
    );
  }
}