Saya mencoba untuk mengulang melalui json_obj setelah memuat menggunakan async XMLHttpRequest() tetapi karena json_obj adalah nol pada peta awal () macet.

Ini kode saya:

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>

Saya mencoba menggunakan rendering bersyarat tetapi juga menimbulkan kesalahan:

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>
0
Mac 20 Agustus 2017, 23:33

2 jawaban

Jawaban Terbaik

Jadi periksa apakah itu nol dan kembalikan yang lain:

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>
)

Kode Anda terlempar karena this.state.stuff adalah objek dan Anda tidak dapat mengulangi objek dengan .map. Jika this.state.json_obj juga merupakan objek dan bukan array, Anda perlu melakukan Object.keys(this.state.json_obj).map(....

2
Dominic 20 Agustus 2017, 20:36

Kode pertama yang Anda berikan menimbulkan kesalahan karena json_obj adalah null seperti yang Anda sebutkan. Tetapi yang kedua menimbulkan kesalahan karena Anda mencoba map di atas objek this.state.stuff yang tidak dapat Anda lakukan. Jadi sebenarnya ada beberapa hal yang dapat Anda lakukan:

Bungkus stuff di dalam array:

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>

Atau Anda dapat membungkusnya saat mendefinisikannya:

constructor() {
    super();
    this.state = {
        loading: true,
        json_obj : null,
        link: "https://api.github.com/users/github/repos",
        stuff : [{name:"loading", updated_at:"loading"}]
    }
}

Atau Anda cukup memeriksa apakah json_obj tersedia dan merender sesuatu yang lain (atau tidak sama sekali).

tidak menghasilkan apa-apa jika json_obj tidak tersedia

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

menampilkan pesan pemuatan saat json_obj tidak tersedia

return (
  <div>
    {
    this.state.json_obj ?
      this.state.json_obj.map((obj, index) => {
       return (
         <div >
           <h1>{obj.name}</h1>
           <h1>{obj.updated_at}</h1>
         </div>
       )
     }) : <div>Loading...</div>
    }
   </div>
  )
1
Amin Jafari 20 Agustus 2017, 20:48