React JSON правильно вернуть Render

118

19 января 2020, 00:50

Суть такая: По ссылке тягаю через JSON API с инстаграмма картинки.

import React from 'react';

const App = () => {
    var requestURL = 'https://www.instagram.com/p/BwA-ZlRhHxq/?__a=1';
    var request = new XMLHttpRequest();
    request.open('GET', requestURL);
    request.responseType = 'json';
    request.send();
    request.onload = function () {
        request.response['graphql']['shortcode_media']['edge_sidecar_to_children']['edges'].map((name) =>
            //<img src={name['node']['display_url']}/>
            console.log(name['node']['display_url'])
        )
    };
    return (
        <p>{request.response}</p>
        )
    };
export default App;

Если я помещаю

return (
    request.response['graphql']['shortcode_media']['edge_sidecar_to_children']['edges'].map((name) =>
        <img src={name['node']['display_url']}/>
    )
)

внуть onload, то появляется ошибка, что ничего не позвращает render...

А в данном случае <p>{request.response}</p> пустой. А если пытаться вывести картинки вне onload, то request.response - пустой...

Внутри onload если делать console.log, то все ссылки выбираются... Что я делаю не так???

Answer 1

Рендер перерисовывает компонент, только если изменился state, а этого у вас и не делается. В примере ниже: если state.fetching = true отображается лоадер, старт загрузки происходит в componentDidMount(), как только закачка завершилась, полученный массив помещаем в state (изменяя его) и ставим fetching=false. В итоге компонент перерисовывается с картинками

class App extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
      urls: [], 
      fetching: true 
    }; 
  } 
  componentDidMount() { 
    let requestURL = 'https://www.instagram.com/p/BwA-ZlRhHxq/?__a=1'; 
 
    let request = new XMLHttpRequest(); 
    request.open('GET', requestURL); 
    request.responseType = 'json'; 
    request.onload = () => { 
      this.setState({ 
        urls: request.response['graphql']['shortcode_media']['edge_sidecar_to_children']['edges'], 
        fetching: false 
      }); 
    }; 
    request.send(); 
  } 
   
  render() { 
    if(this.state.fetching) { 
      return ( 
        <div className="spinner-border"> 
          <span className="sr-only">Loading...</span> 
        </div> 
      ); 
    } 
     
    return this.state.urls.map(name => <img className="img-thumbnail mr-3 mb-3" src={name['node']['display_url']}/>); 
  } 
} 
 
ReactDOM.render( 
  <App/>, 
  document.getElementById('root') 
);

img { 
  width: 200px; 
}

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> 
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 
<div id="root"></div>