渲染方法，Meteor React答案

【问题标题】：Render Method, Meteor React渲染方法，Meteor React
【发布时间】：2017-10-29 01:06:53
【问题描述】：

按照流星网站上的入门教程后，我在“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 上

【问题讨论】：

标签： javascript reactjs meteor meteor-react

【解决方案1】：

最终代码。

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

【讨论】：

【解决方案2】：

我认为调用在渲染函数中进行 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>
    );
  }
}

【讨论】：

感谢您的提醒。