Nano Hash - криптовалюты, майнинг, программирование

Возможно ли наличие нескольких вызовов API в одном компонентеDidMount?

У меня довольно сложная проблема. В моем методе componentDidMount у меня есть:
1.) Состояние, устанавливаемое для переменной 'dog' 2.) Вызов API, выполняемый через axios, ответ которого устанавливает состояние другой переменной 'dogName'

Это создает проблемы (данные, которые я хочу отобразить в браузере, не отображаются) - есть ли лучший способ написать мой код?

setData = async () => {
  const x = await fetch("https://dog.ceo/api/breed/hound/images");
  const y = await x.json();
  const z = await y.message;
  
  let newArr = [];
  for (let i = 0; i < z.length; i++) {
    if (i <= 9) {
      newArr.push(z[i]);
    }
   }
  return newArr;
  };

componentDidMount() {
  this.setState({
    loading:true
  })
  this.setData()
  .then(res =>{
    this.setState({
      loading:false,
      dog: res,
    })
  })
    axios.get('http://localhost:3000/dogs')
    .then(res => {
        this.setState({
            dogName:res.data
          })
        })
        .catch(error => {
          console.log(error)
        })
      }
reactjs http axios
15.07.2020

Ответы:


1

это должно сработать

Вы одновременно слушаете оба обещания, а затем выполняете setState со всеми полученными данными. Мой совет для вас: вы должны изучить перехватчики реакции или даже response-redux, чтобы получать данные не напрямую в коде вашего компонента :)

componentDidMount() {
  this.setState({
    loading: true,
  });

  const dogPromise = this.setData();
  const dogNamePromise = axios.get('http://localhost:3000/dogs');

  Promise.all([
      dogPromise,
      dogNamePromise
  ])
    .then(([dogResponse, dogNameResponse]) => {
      this.setState({
        loading: false,
        dog: dogResponse,
        dogName: dogNameResponse.data,
      });
    })
    .catch(error => {
      console.log(error);
    });
}
15.07.2020
  • Привет, спасибо за помощь! Я реализовал ваш код, но проблема все равно возникла. Интересно, что когда я просто позвонил в конечную точку «/ dogs», это сработало. Когда я сделал оба вызова в пределах componentDidMount, мне показалось, что все вышло наперекосяк. Вот что сработало: componentDidMount() { axios.get('http://localhost:5000/dogs') .then(res => { this.setState({ dogName:res.data }) }) } 16.07.2020
  • Выдается ли ошибка? Когда вы помещаете console.log(this.state) в функцию рендеринга, существует ли часть собаки? Может, покажете свою render функцию, может там небольшая ошибка :) 16.07.2020
    • Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..