![](/img/trans.png)
[英]I'm fetching a problem when I'm trying to fetch data from an API by using useEffect in react
[英]I'm trying to extract Data from Object (API) in React
我正在嘗試從對象在頁面上顯示API數據。
我試圖顯示來自camperlist.js文件中CamperList變量的數據,但是遇到了麻煩。
我將粘貼用於檢索API的每個文件中的代碼。
這是來自camperlist.js文件的代碼:
import React from 'react'; import CamperListItem from './camper_list_item.js' //This is where the data is being pulled from VVVV const CamperList = (props) => { console.log('these are the datas', props.campers); return ( <div> hello world </div> ); } export default CamperList
在下一個文件中,您將找到正在渲染的“ CamperList”組件。
這是App.js文件:
import React, { Component } from 'react'; import logo from './logo.svg'; //import './App.css'; import axios from 'axios'; import CamperList from './camperlist' export default class App extends Component { constructor(props) { super(props); this.state = { recentCampers: [], allTimeCampers: [], currentView: 'recentCampers' } } componentWillMount() { let current = this; axios.all([this.fetchRecent(), this.fetchAllTime()]).then(axios.spread(function(recentCampers, allTimeCampers){ current.setState({ recentCampers, allTimeCampers}); })); } fetchRecent(){ return axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/recent') } fetchAllTime(){ return axios.get('https://fcctop100.herokuapp.com/api/fccusers/top/alltime') } changeView(currentView){ this.setState({currentView}) } render() { return ( <div> <h2> viewing top {this.state.currentView} </h2> <button onClick={()=> this.changeView('recentCampers')} className="btn btn-primary"> Recent </button> <button onClick={() => this.changeView('allTimeCampers')} className="btn btn-primary"> All Time </button> <CamperList campers={this.state[this.state.currentView]}/> </div> ); } }
這是camper_list_item.js文件:
import React from 'react'; const CamperListItem = (props) => { return( <div> camper item </div> ); } export default CamperListItem
您能夠成功收到您的請求嗎?
因為通過查看您的代碼。 它只會顯示hello world
。
您應該像這樣更改CamperList組件,以顯示您的請求。
import React from 'react';
import CamperListItem from './camper_list_item.js'
//This is where the data is being pulled from VVVV
const CamperList = (props) => {
return (
<div>
{props.campers.map(c => {
return <div key={c.username}>{c.username}</div>
}}
</div>
);
}
export default CamperList
您可能會返回CamperListItem
通過循環組件后campers
在道具CamperList
。
import React from 'react';
import CamperListItem from './camper_list_item.js'
const CamperList = (props) => {
return (
<div>
{
props.campers.map((camper, i) => {
return <CamperListItem camper={camper} key={i} />
}
}
</div>
);
}
export default CamperList;
在這里,我舉例說明了使用給CamperListItem
的道具的例子:
import React from 'react';
const CamperListItem = (props) => {
return(
<div>{props.camper.name}</div>
);
}
export default CamperListItem
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.