主页 / 问题 / 967829
Accepted
Ljil
Asked:2020-04-10 17:43:31 +0000 UTC2020-04-10 17:43:31 +0000 UTC

反应 JSON 返回正确渲染

  • 772

底线是：我通过 JSON API 从 Instagram 图片中提取链接。

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，那么所有的链接都会被选中……我做错了什么？？？

javascript

1 个回答

  1. Best Answer

    Render 仅在组件发生更改时重新渲染组件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>

    • 1

相关问题