Axios получает запросы и отображает их в таблице
Я новичок в реагировании и сокращении, я использую axios, я могу получить данные из api, я видел это, распечатав их в консоли, но не знаю, как загрузить данные в таблицу.
Код таблицы находится в sports / index.js, а код axios - в actions / index.js. Я предоставляю код и stackblitz здесь.
export const fetchAllPosts = () => {
return (dispatch) => {
return axios.get(apiUrl)
.then(response => {
console.info("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' },
];
Подскажите, как исправить?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
попробуй это https://stackblitz.com/edit/react-redux-realworld-gdytzz?file=components%2FSports%2Findex.js
Я добавил соединение, чтобы убедиться, что ваш компонент был подключен к состоянию редукции.
const mapStateToProps = (state) => {
return {
posts: state.posts
}
}
подключение:
export default withRouter(connect(mapStateToProps, {})(withStyles(styles)(EnhancedTable)));
Я также добавил willReceiveProps для изменения состояния React при получении данных.
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)))
вам может потребоваться изменить данные, которые будут отображаться в соответствии с вашими требованиями, но теперь отображаются выбранные данные.