等待對象數組加載並映射（）它。 React

Question

我試圖循環通過json_obj加載後使用async XMLHttpRequest()，但因爲json_obj在啓動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

因此，檢查它是否爲空，並返回別的東西：

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(...。

Answer 2

您提供的第一個代碼會引發錯誤，因爲json_obj是null正如您所提及的。但第二個拋出一個錯誤，因爲你試圖map通過對象this.state.stuff你不能做。所以，其實有兩件事情可以做：

包裝stuff內部數組：

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> 

或者你可以用它定義它的時候：

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

，或者你可以簡單地檢查如果json_obj可用並且呈現別的東西（或者什麼也不是）。

呈現什麼，如果json_obj不可

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

渲染加載消息時json_obj不可

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