reactjs - 如何从 axios GET 请求中渲染表格?
问题描述
我正在尝试从 NBA API 呈现统计数据表。我正在使用 redux 来存储用户选择的玩家并通过我的 Table 组件请求 API。我适当地检索了统计信息,但它最终会无限地请求 API。我知道我在异步请求中设置钩子会导致这种行为,但我目前不确定解决方法。我认为这是一个生命周期错误,我是否应该尝试使用 useEffect 并将来自 redux 的播放器对象存储在依赖数组中?任何输入都会很棒。我将在下面发布代码。
这是我记录 cData 时的行为和控制台日志的屏幕截图: https ://imgur.com/3WNsZt9
表.js
const DataTable = () => {
const [completeData, setCompleteData] = React.useState([]);
const players = useSelector(state => state.players);
var cData = [];
const search = async val => {
try {
const res = await axios(
`https://www.balldontlie.io/api/v1/season_averages?player_ids[]=${val}`
);
const responseData = res.data.data;
console.log(responseData);
return responseData;
} catch (err) {
console.log(err);
}
};
return (
<div>
<h3>2019-2020 Season Averages</h3>
<Table responsive>
<thead>
<tr>
<th>Player</th>
<th>Points</th>
<th>Assists</th>
<th>Rebounds</th>
<th>Steals</th>
<th>Blocks</th>
<th>Turnovers</th>
</tr>
</thead>
<tbody>
{Object.keys(players).map(function(item, i) {
var currentPlayerData = {};
currentPlayerData = search(players[item])
.then(result => {
cData = JSON.parse(JSON.stringify(result[0]));
console.log(cData);
setCompleteData(old => [...old, cData]);
// setCurrentData(cData);
})
.catch(err => {
console.log(err);
});
})}
{completeData &&
completeData.map(function(item, i) {
console.log(item);
return (
<tr key={i}>
<td>{item.id}</td>
<td>{item.pts}</td>
<td>{item.ast}</td>
<td>{item.reb}</td>
<td>{item.stl}</td>
<td>{item.blk}</td>
<td>{item.turnover}</td>
</tr>
);
})}
</tbody>
</Table>
</div>
解决方案
尝试这种方法(假设您想在组件加载后立即从 NBA API 获取数据)。
当你的表格组件加载时,componentDidMount()
调用一个方法,例如this.getNBAdata()
在你的 action.js 中调用,它将从 API 获取数据。一旦您收到数据,.then()
您应该将带有有效负载数据的操作发送到减速器,我们可以通过添加 mapStatetoProps() 您的表组件来使用它,因此一旦您收到道具变量中的数据,它将重新加载/刷新该特定组件和在 .map() 的帮助下,您将能够在表格中显示数据。
Action.js 示例请求:
export const getNBAData = () => {
return (dispatch) => {
Axios.get("http://nbadataendpoint.com")
.then(response => {
//you will get the data in response object
dispatch({ type: 'YOUR_SUCCESS', payload: 'SOME_VALUE' });
})
.catch(error => {
dispatch({ type: 'UNAUTHORISED', payload: 'SOME_VALUE'});
}
});
}
};