React.js отображает JSON-ответ, совместную выборку или Axios

Я слишком долго выдергивала волосы и больше не могла сосредоточиться.

Я пытаюсь взять JSON из URL-адреса и просто визуализировать его в браузере. Его даже не нужно форматировать, по крайней мере, пока я не преодолею это препятствие.

Я могу заставить его отображаться в консоли через console.log, но не могу получить ответ в методе рендеринга. Я упростил его до приведенного ниже кода, пока не увижу что-то на странице.

import React, { Component } from 'react';
// import axios from 'axios';

var co = require('co');
co(function *() {
var res = yield fetch('https://api.stackexchange.com/2.2/search?order=desc&sort=activity&intitle=perl&site=stackru');
var json = yield res.json();
console.log(res);
});

class App extends Component {

render() {
return (
  <div className="App">
    INSERT JSON HERE
  </div>
  );
 }
}

export default App;

Я также получил ответ, используя

fetch('https://api.stackexchange.com/2.2/search?order=desc&sort=activity&intitle=perl&site=stackru')
    .then(function(res) {
        return res.json();
    }).then(function(json) {
        console.log(json);
    });

Первоначально я начал использовать axios, потому что подумал: "О, боже, я собираюсь использовать axios, потому что, кто классный? Я потрясающий".

axios.get('https://api.stackexchange.com/2.2/search?order=desc&sort=activity&intitle=perl&site=stackru')
  .then(function(response) {
    console.log(response.data);
  });

но это было ошибочно, потому что сегодня я не удивительный.

Я возьму любую помощь, которую смогу получить! Мои первоначальные планы также включали использование карты, чтобы просто перебирать "предметы", чтобы получить дополнительные очки, если вы сможете приблизить меня к спасению в этой области.

Источник

2 ответа

Решение
import React, { Component } from "react";
import axios from "axios";

const URL = "https://api.stackexchange.com/2.2/search?order=desc&sort=activity&intitle=perl&site=stackru";

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      items: []
    }
  }

  componentDidMount() {
    var _this = this;
    axios.get(URL)
    .then(function(res){
      _this.setState({
        items: res.data.items
      });
    })
    .catch(function(e) {
      console.log("ERROR ", e);
    })
  }

  render() {
    const renderItems = this.state.items.map(function(item, i) {
      return <li key={i}>{item.title}</li>
    });

    return (
      <ul className="App">
        {renderItems}
      </ul>
    );
  }
}
Источник

Вы можете сделать это через состояние компонентов и жизненный цикл React.

Прочитайте об этом здесь: React State / Lifecycle

Вы можете поместить вызов Fetch в функцию componentDidMount компонента, а для обратного вызова установить состояние для просмотра.

Если бы вы использовали Fetch, ваш компонент может выглядеть так:

class App extends Component {
 constructor(props) {
  super(props);
  this.state = {
   data: false
  };
  this.receiveData = this.receiveData.bind(this);
 }
 componentDidMount() {
  var _self = this;
  fetch('https://api.stackexchange.com/2.2/search?order=desc&sort=activity&intitle=perl&site=stackru')
  .then(function(res) {
     return res.json();
  }).then(function(json) {
     console.log(json);
     _self.receiveData(json);
  });
 }
 receiveData(data) {
  this.setState({data});
 }
 render() {
  return <div>{this.state.data}</div>
 }
}
Источник
Другие вопросы по тегам