使用ReactJs从页面上输出API数据

Question

class Rnn extends Component{ 
constructor(props){ 
super(props); 
this.state={ 
x:[] 
} 
} 

componentWillMount(){ 
var api={ 
getroverss(){ 
var url="https://fcctop100.herokuapp.com/api/fccusers/top/recent"; 
return fetch(url).then((res) => res.json()); 
} 
}, 
api.getrovers().then((res) =>{ 
this.setState({ x: res 
}) 
}); 
} 
render(){ 
var xx=this.state.x; 
console.table(xx); 
return (
    <h1>print data</h1> 
); 
}} 

我一直在使用这个API从它获取数据。我已经设法输出控制台上的数据。如何获取（输出/打印）我网页上的数据？ （我只想使用提取方法）。

Answer 1

您可以使用map遍历项目并将其呈现到DOM

{xx.map((x, idx) => {<div key={idx}> {x.username} </div> })} 

所以，在你决定，你可以选择如何格式化内部xx其他数据。让我补充一点，你可能更喜欢componentDidMount到componentWillMount。看看为什么here