javascript - 等待对象数组加载并对其进行映射()。 react

Question

我试图在使用异步 XMLHttpRequest() 加载 json_obj 后对其进行循环，但由于 json_obj 在 start map() 崩溃时为 null。

这是我的代码:

import React, { Component, PropTypes} from 'react';
import ReactDOM from 'react-dom';


class ImageViewer extends React.Component {
    constructor() {
        super();
        this.state = {
            loading: true,
            json_obj : null,
            link: "https://api.github.com/users/github/repos"
        }
    }
    componentDidMount() {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", this.state.link, true);
        xhr.onload = function (e) {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    this.setState({ json_obj :JSON.parse(xhr.responseText).sort(function(a, b){var keyA = new Date(a.updated_at),keyB = new Date(b.updated_at);if(keyA > keyB) return -1;if(keyA < keyB) return 1;return 0;})});
                } else {
                console.error(xhr.statusText);
                }
            }
        }.bind(this);
        xhr.onerror = function (e) {
        console.error(xhr.statusText);
        };
        xhr.send(null);
    }
    render() {
    return (
            <div>
                {this.state.json_obj.map((obj, index) => {
                            return (
                                <div >
                                    <h1>{obj.name}</h1>
                                    <h1>{obj.updated_at}</h1>
                                </div>
                            )
                })}
            </div>
    )
}}
ReactDOM.render(
  <ImageViewer />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
: <div id="root"></div>

我尝试使用条件渲染，但它也会引发错误:

import React, { Component, PropTypes} from 'react';
import ReactDOM from 'react-dom';


class ImageViewer extends React.Component {
    constructor() {
        super();
        this.state = {
            loading: true,
            json_obj : null,
            link: "https://api.github.com/users/github/repos",
            stuff : {name:"loading", updated_at:"loading"}
        }
    }
    componentDidMount() {
        var xhr = new XMLHttpRequest();
        xhr.open("GET", this.state.link, true);
        xhr.onload = function (e) {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    this.setState({ json_obj :JSON.parse(xhr.responseText).sort(function(a, b){var keyA = new Date(a.updated_at),keyB = new Date(b.updated_at);if(keyA > keyB) return -1;if(keyA < keyB) return 1;return 0;})});
                } else {
                console.error(xhr.statusText);
                }
            }
        }.bind(this);
        xhr.onerror = function (e) {
        console.error(xhr.statusText);
        };
        xhr.send(null);
    }
    render() {
    return (
            <div>
                {(this.state.json_obj ? this.state.json_obj : this.state.stuff).map((obj, index) => {
                            return (
                                <div >
                                    <h1>{obj.name}</h1>
                                    <h1>{obj.updated_at}</h1>
                                </div>
                            )
                })}
            </div>
    )
}}
ReactDOM.render(
  <ImageViewer />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

Answer 1

因此检查它是否为 null 并返回其他内容:

if (!this.state.json_obj) {
  return <div>Loading...</div>;
}

return (
  <div>
    {this.state.json_obj.map((obj, index) => (
      <div key={obj.name}>
        <h1>{obj.name}</h1>
        <h1>{obj.updated_at}</h1>
      </div>
    ))}
  </div>
)

您的代码抛出异常，因为 this.state.stuff 是一个对象，并且您无法使用 .map 迭代对象。如果 this.state.json_obj 也是一个对象而不是数组，则需要执行 Object.keys(this.state.json_obj).map(...。