@AntonVirovets

Как сделать Ajax запрос на React js?

Здравствуйте. Есть такое задание:
Необходимо написать приложение на ReactJS, которое будет запрашивать AJAX-запросом этот json: demo.omnigon.com/pgatdemo1/mikeg/products.json.
И потом вывести в виде списка полученные товары.
Но проблема в том что я React не знаю еще, и не могу найти точную инфу где посмотреть как это сделать. Помогите разобраться)
  • Вопрос задан
  • 572 просмотра
Пригласить эксперта
Ответы на вопрос 3
Для аякс запросов можете использовать Fetch или Axios.
Советую выбрать второй.
Ответ написан
Krasnodar_etc
@Krasnodar_etc
little front
У React же просто охренительный официальный туториал

Пройдите его - это несколько часов займёт. Пока вы не разберётесь немного с Реактом - вы ничего на нём не напишете)
Ответ написан
maxfarseer
@maxfarseer
реакт.рф, обучаю реакту и компании
Или используйте старый xhr (новый fetch тоже норм). В общем, тут суть в том, что ваш вопрос больше о том, как сделать асинхронный запрос в React. Все просто: храните начальное состояние и флаг загрузки в стейте. При запросе обновляйте. Реакт сам все отрисует при изменение стейта.

Пример (код с одной из глав нового учебника, если интересно инфа в профиле)
class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      data: [],
      isLoading: false,
    }
  }
  componentDidMount() {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'http://localhost:3000/data.json', true); // замените адрес
    xhr.send();
    this.setState({ isLoading: true })

    xhr.onreadystatechange = () => {
      if (xhr.readyState !== 4) {
        return false
      }

      if (xhr.status !== 200) {
        console.log(xhr.status + ': ' + xhr.statusText)
      } else {
        this.setState({
          data: JSON.parse(xhr.responseText),
          isLoading: false,
        })
      }
    }
  }
  renderProducts() {
    const { data, isLoading } = this.state
    if (isLoading) {
      return <img src='/i/preloader.gif' alt='загружаю...' /> // рисуем прелоадер
    } else {
      return data.map(item => {
        // я здесь отрисываю все через другой компонент, вы же можете просто рисовать сразу верстку для начала
        return <ProductCard key={item.id} name={item.name} price={item.price} quantity={item.quantity} />
      })
    }
  }
  render() {
    return (
      <div className='App'>
        <div className='product-list'>
          {this.renderProducts()}
        </div>
      </div>
    )
  }
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
YLab Тольятти
от 70 000 до 130 000 руб.
ЭЛКОД Москва
от 120 000 руб.
Leningrad Media Санкт-Петербург
от 60 000 руб.