Как одно состояние обновления в приложении React после того, как axios получает запрос, привязанный к событию?

Отправляя форму в этом проекте React, я хочу сделать запрос на получение axios к API Google Places, но я не могу обновить свое состояние. Не похоже, что componentDidMount () может быть привязан к событию, подобному моему handleSubmit (). Есть предложения по обновлению моего состояния?

import React, { Component } from "react";
import axios from "axios";
import Search from "../Components/Search";
import ResultContainer from "../Components/ResultContainer";

export default class Body extends Component {
  constructor(props) {
    super(props);
    this.state = {
      city: "",
      sights: {},
      bites: {}
    };
    this.handleChangeEvent = this.handleChangeEvent.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChangeEvent(event) {
    this.setState({ city: event.target.value });
  }

  handleSubmit(event) {
    event.preventDefault();
    console.info(this.state);

    axios
      .get(
        "https://maps.googleapis.com/maps/api/place/textsearch/json? 
         query=attractions+in+" +
          this.state.city +
          "&key=myKeyFromGoogle",
        {
          mode: "no-cors",
          header: {
            "Access-Control-Allow-Orgin": "http://localhost:3000",
            "Content-Type": "application/json",
            "Access-Control-Allow-Headers":
              "Origin, X-Requested-With, Content-Type, Accept"
          },
          withCredentials: true,
          credentials: "same-origin"
        }
      )
      .then(response => {
        this.setState({ sights: response.data.results });
      })
      .catch(function(err) {
        console.info("err", err);
      });
  }

render() {
    return (
      <div>
        <Search
          city = {this.state.city}
          handleChangeEvent = {this.handleChangeEvent}
          handleSubmit = {this.handleSubmit}
        />

        <ResultContainer sights= {this.state.sights}/>
        <ResultContainer />

      </div>
    );
  }
}

Когда я пытаюсь установить состояние после запроса axios, мне кажется, что у меня нет данных, готовых для рендеринга. Любые предложения будут ценны. Спасибо!

Я думаю, что response.data.results - это массив объектов. Если это так, то в конструкторе меняются взгляды: [];

MontyGoldy 18.05.2018 08:07

Ответ console.info перед setState.

pritesh 18.05.2018 08:13

А также вы можете использовать жизненный цикл componentWillReceiveProps () для обновления прицелов.

MontyGoldy 18.05.2018 08:18

Переместите свои запросы в контроллер, такой как thunk или saga.

deathangel908 18.05.2018 09:02

Попробуйте использовать стрелочную функцию.

null 18.05.2018 09:05

@null, когда я пытаюсь использовать стрелочные функции, он говорит, что мой метод не определен. Было бы ОГРОМНОЙ помощью, если бы вы могли показать мне, как с этим справиться ...

Scott B 18.05.2018 22:45
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
6
141
1

Ответы 1

В функции handleSubmit () используется понятие контекста.

handleSubmit(event) {
  var _this = this;
  //then use in setState as bellow
  _this.setState({ sights: response.data.results});
}

Пробовал это. Я могу console.info (_this) после setState, но все еще обнаруживаю ошибку. Есть предположения?

Scott B 18.05.2018 21:27

Другие вопросы по теме