Реакция - Показать загрузчик при клике, которому уже назначена функция - PullRequest
Новая
       4

Реакция - Показать загрузчик при клике, которому уже назначена функция

0 голосов
/ 04 февраля 2020

У меня уже есть событие click внутри троичного оператора, которое выполняет запрос GET от моего 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>
    );
  }
}

Благодарю за помощь.

Ответы [ 2 ]

1 голос
/ 04 февраля 2020

Что вы можете сделать, это добавить состояние «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>
    );
  }
}
0 голосов
/ 04 февраля 2020

Это рабочая демонстрация, которая показывает loading при запуске вызова API и отключает кнопку для предотвращения нескольких вызовов API. Я добавил время 2se c, чтобы показать демо. Проверьте образец стекаблиц

Это обновленный код, здесь я использовал поддельный API (https://jsonplaceholder.typicode.com/users), чтобы показать демо 

   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);
    this.combinedFunction = this.combinedFunction.bind(this)
}

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

fetchData() {

      axios.get('https://jsonplaceholder.typicode.com/users')
          .then(res => {
              this.setState({
                  meal: res.data,
                  isLoaded: false
              })
          })
};

   combinedFunction =()=> {
       this.setState({isLoaded: true})
     setTimeout(()=>{
    this.fetchData();

     },2000)
    this.handleClick();
}

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

 return (

   <>
    <div >
          Users: 
            <button onClick={this.combinedFunction } disabled={isLoaded ? true : false}>{isLoaded ? 'Loading...':'Find User'}</button>
      </div>

      <div>
      {meal && meal.map(item =>(
        <div key={item.id}>
          <p>{item.id} - {item.name}</p>
        </div>
      ))}
      </div>
      </>
    );
  }
}
...