[英]Render Method, Meteor React
After following the getting started tutorial on the meteor website i stopped around the item "2.4 Create App component", first install: 在遵循流星网站上的入门教程之后,我停在“ 2.4创建应用程序组件”项附近,首先进行安装:
meteor add http
The app purpose is to visualize in differently the lottery api data of the state of New York. 该应用程序的目的是以不同方式可视化纽约州的彩票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>
);
}
}
the object from the http call shows up on the console but not on the DOM 来自http调用的对象显示在控制台上,而不显示在DOM上
I don't think its a good idea to call the functions that makes an API call in the render function as it will be called everytime the component renders, a better place will be to have it in the componentDidMount function and save the result in state. 我认为在render函数中调用进行API调用的函数不是一个好主意,因为每次组件渲染时都会调用它,一个更好的地方是将它放在componentDidMount函数中并将结果保存在状态中。 If you want the call to repeat, do it in setInterval function like 如果您希望重复通话,请在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>
);
}
}
Final code. 最终代码。
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>
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.