Как написать оператор if внутри вызова API, чтобы он напоминал состояние загрузки? - PullRequest
Новая
       116

Как написать оператор if внутри вызова API, чтобы он напоминал состояние загрузки?

0 голосов
/ 20 июня 2020

Я беру значение из пользовательского ввода и помещаю его в вызов API как argument, показывая результаты, связанные с пользовательским вводом. Когда эти данные API загружаются. Для простоты я хочу войти в консоль «Загрузка» и, когда данные будут загружены, console.log данные. Я не знаю, как настроить оператор if между моим вызовом axios.

Кроме того, правильно ли я использую state? Должен ли я определять значение query и isLoading в constructor? 

class App extends Component {
  constructor() {
    super();
    this.state = {
      movieList: [],
    }
  }


  // propped value from user input which goes inside the API call as a parameter
  handleSearch = (value) => {

    this.setState({
      query: value,
      isLoading: true
    })

    //if isLoading === true --> console.log('Loading');
    axios({
      url: `apicall${value}2`,
      method: 'GET',
      responseType: 'JSON',
      // isLoading === false --> console.log('movieList');
    }).then((response => {
      let movieList = response;
      
      this.setState({
        movieList,
        isLoading: false,
        query: ''
      })

    }))
  }

1 Ответ

0 голосов
/ 20 июня 2020

В вашем коде нет query и isLoading в состоянии. Я обновил их в приведенном ниже коде.

До console.log до и после вызова API в вашем коде можно использовать функцию обратного вызова setState s.

И я реорганизовал код, чтобы он выглядел чистый. 

class App extends Component {
  constructor() {
    super();
    this.state = {
      movieList: [],
      query: "",
      isLoading: false
    };
  }

  movieListSearchInitiated = value => {
    this.setState(
      {
        query: value,
        isLoading: true
      },
      () => {
        // Use setStates callback function to log

        console.log("Loading");
      }
    );
  };

  movieListSearchSuccess = movieList => {
    this.setState(
      {
        movieList,
        isLoading: false,
        query: ""
      },
      () => {
        // Use setStates callback function to log

        console.log(this.state.movieList);
      }
    );
  };

  movieListApiCall = value => {
    return axios({
      url: `apicall${value}2`,
      method: "GET",
      responseType: "JSON"
    });
  };

  handleSearch = value => {
    this.movieListSearchInitiated(value);
    this.movieListApiCall(value).then(movieList => {
      this.movieListSearchSuccess(movieList);
    });
  };
}

Надеюсь, вы ошиблись при обработке запроса API.

...