axios获取请求并显示在表中 [英] axios get requests and displaying in table
问题描述
我是反应和还原的新手,我使用的是axios,我能够从api中获取数据,我通过在控制台中进行打印看到了它,但不确定如何将数据加载到表中./p>
表代码在sports/index.js中,而axios代码在actions/index.js中 我在此处提供代码和stackblitz./p>
export const fetchAllPosts = () => {
return (dispatch) => {
return axios.get(apiUrl)
.then(response => {
console.log("fetchAllPosts.response.data--->", response.data);
dispatch(fetchPosts(response.data))
})
.catch(error => {
throw(error);
});
};
};
const rows = [
{ id: 'name', numeric: false, disablePadding: true, label: 'Gender' },
{ id: 'shortname', numeric: true, disablePadding: false, label: 'Name' },
{ id: 'description', numeric: false, disablePadding: true, label: 'Location' },
{ id: 'order', numeric: true, disablePadding: false, label: 'Phone' },
{ id: 'code', numeric: true, disablePadding: true, label: 'Picture' },
{ id: 'active', numeric: true, disablePadding: true, label: 'Nat' },
];
你能告诉我如何解决吗?
尝试一下 https://stackblitz.com/edit/react-redux-realworld-gdytzz?file = components%2FSports%2Findex.js
我添加了一个连接以确保您的组件已连接到redux状态.
const mapStateToProps = (state) => {
return {
posts: state.posts
}
}
连接:
export default withRouter(connect(mapStateToProps, {})(withStyles(styles)(EnhancedTable)));
我还为获取数据时更改的React状态添加了willReceiveProps.
componentWillReceiveProps(nextProps){
if (this.props.posts !== nextProps.posts) {
this.setState({data: nextProps.posts})
}
}
您静态定义的所有字段均与响应不匹配,因此,我已尽力尝试用获取数据填充表数据.
将静态数据更改为此:
data: [...((this.props.posts || []).map((x, i) => createData(i, x.name, x.name.first, x.description || "description", x.order || 1, x.code, x.active)))
您可能需要根据需要更改要显示的数据,但是现在正在显示获取的数据.
I am new to react and redux, I'm using axios, I am able to fetch the data from the api, I saw it by printing it in console, but not sure how to load the data in the table.
The table code is in sports/index.js and axios code is in actions/index.js I provide code and stackblitz here.
export const fetchAllPosts = () => {
return (dispatch) => {
return axios.get(apiUrl)
.then(response => {
console.log("fetchAllPosts.response.data--->", response.data);
dispatch(fetchPosts(response.data))
})
.catch(error => {
throw(error);
});
};
};
const rows = [
{ id: 'name', numeric: false, disablePadding: true, label: 'Gender' },
{ id: 'shortname', numeric: true, disablePadding: false, label: 'Name' },
{ id: 'description', numeric: false, disablePadding: true, label: 'Location' },
{ id: 'order', numeric: true, disablePadding: false, label: 'Phone' },
{ id: 'code', numeric: true, disablePadding: true, label: 'Picture' },
{ id: 'active', numeric: true, disablePadding: true, label: 'Nat' },
];
Can you tell me how to fix it?
try this https://stackblitz.com/edit/react-redux-realworld-gdytzz?file=components%2FSports%2Findex.js
I added a connect to make sure your component was connected to the redux state.
const mapStateToProps = (state) => {
return {
posts: state.posts
}
}
the connect:
export default withRouter(connect(mapStateToProps, {})(withStyles(styles)(EnhancedTable)));
I also added a willReceiveProps for the React state to change when the data is fetched.
componentWillReceiveProps(nextProps){
if (this.props.posts !== nextProps.posts) {
this.setState({data: nextProps.posts})
}
}
All the fields which you statically defined don't match with the response, so I have tried doing the best I can for filling the table data with the fetch data.
changed the static data to this:
data: [...((this.props.posts || []).map((x, i) => createData(i, x.name, x.name.first, x.description || "description", x.order || 1, x.code, x.active)))
you might need to change the data to be shown as per your requirement, but the fetched data now is being shown.
这篇关于axios获取请求并显示在表中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!