axios получать запросы и отображать в таблице

Question

Я новичок в реагировании и редукции, я использую axios, я могу получить данные из API, я увидел их, напечатав их в консоли, но не уверен, как загрузить данные в таблицу.

Код таблицы находится в sports / index.js, а код axios - в actions / index.js Я предоставляю код и stackblitz здесь .

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' },
];

Подскажите, как это исправить?

Answer 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)))

вам может потребоваться изменить отображаемые данные в соответствии с вашими требованиями, но извлеченные данные теперь отображаются.