渲染方法，流星反应

Question

按照 meteor 网站上的入门教程后，我在“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>
    );
  }
}

渲染方法，流星反应

Render Method, Meteor React

javascript

meteor

reactjs

meteor-react