从 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 从中获取数据。我已经设法在控制台上输出数据。如何获取（输出/打印）我网页上的数据？ （我只想使用 fetch 方法）。

Answer 1

您可以使用map 来迭代项目并将它们呈现到 DOM

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

因此，您可以自行决定如何格式化xx 中的其他数据。让我补充一点，您可能更喜欢componentDidMount 而不是componentWillMount。看看为什么here