Render方法，流星陣營

Question

流星網站我停止圍繞項目「2.4創建應用程序組件」在以下的入門教程後，先安裝：

meteor add http 

該應用程序的目的是不同的可視化彩票api紐約州的數據。

import React, { Component } from 'react'; 
import { HTTP } from 'meteor/http'; 

var apiUrl = 'https://data.ny.gov/api/views/dg63-4siq/rows.json'; 

export default class App extends Component { 

    numbers() { 
    HTTP.get(apiUrl, {}, function(err, res){ 
     if(err){ 
      console.log('ERROR @ CALL'); 
     } else { 
      console.log(res); 
      return res.data.data.slice(-50).map((result, index) => 
      <li key={ result[0] }>{`${result[8]} - ${result[9]}`}</li> 
      ); 
     } 
    }); 
    } 

    render() { 
    return (
     <div className="container"> 
     <header> 
      <h1>Numbers</h1> 
     </header> 
     <ul> 
      { this.numbers() } 
     </ul> 
     </div> 
    ); 
    } 
} 

從HTTP調用的對象顯示在控制檯上，但不是在DOM

Answer 1

我不認爲這是一個好主意，調用，使的API調用渲染功能的功能它會在組件每次渲染時調用，更好的地方是將它放在componentDidMount函數中並將結果保存在狀態中。如果要呼叫重複，請在setInterval函數中執行，如

export default class App extends Component { 
    state = {data: []} 
    componentDidMount() { 
    var comp = [...this.state.comp] 
    this.interval = setInterval(()=> { 
     HTTP.get(apiUrl, {}, function(err, res){ 
     if(err){ 
      console.log('ERROR @ CALL'); 
     } else { 
      console.log(res); 
      this.setState({data: res.data.data.slice(-50)}) 

     } 
     }.bind(this)); 
    }, 2000) 

    } 
    componentWillUnmount() { 
     clearInterval(this.interval) 
    } 
    render() { 
    return (
     <div className="container"> 
     <header> 
      <h1>Numbers</h1> 
     </header> 
     <ul> 
      {this.state.data.map((result, index) => 
      <li key={ result[0] }>{`${result[8]} - ${result[9]}`}</li> 
      ); } 
     </ul> 
     </div> 
    ); 
    } 
} 

Answer 2

最終代碼。

import React, { Component } from 'react'; 
import { HTTP } from 'meteor/http'; 

var apiUrl = 'https://data.ny.gov/api/views/dg63-4siq/rows.json'; 

export default class App extends Component { 
    constructor(props){ 
     super(props); 
     this.state = { data : [] }; 
    } 
    componentDidMount(){ 
     var self = this; 
      HTTP.get(apiUrl, {}, function(err, res){ 
       if(err){ 
        console.log('ERROR @ CALL'); 
        } else { 
         self.setState((state, props) => ({ 
          data : res.data.data.slice(-50) 
          })); 
         console.log("state equals response"); 
        } 
      }); 
    } 

    render() { 
    return (
     <div className="container"> 
     <header> 
      <h1>Numbers</h1> 
     </header> 
     <ul> 
      {this.state.data.map((result) => 
      <li key={ result[0] }>{`${result[8]} - ${result[9].split(' ')}`}</li> 
      )} 
     </ul> 
     </div> 
    ); 
    } 
}