axios获取请求并显示在表格中

本文是小编为大家收集整理的关于axios获取请求并显示在表格中的处理/解决方法，可以参考本文帮助大家快速定位并解决问题，中文翻译不准确的可切换到English标签页查看源文。

中文
English

问题描述

我是React and Redux的新手，我正在使用Axios，我能够从API中获取数据，我通过在控制台中打印出来，但不确定如何将数据加载到表中.<<<<<<<<<<<<<<

表代码在sports/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' },
];

你能告诉我如何修复它吗?

推荐答案

尝试这个 react-redux-realworld-gdytzz?file =组件％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)))

您可能需要根据您的要求更改要显示的数据，但是现在显示的数据正在显示.

本文地址：https://www.itbaoku.cn/post/1937803.html

百度翻译此文有道翻译此文

问题描述

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?

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.

上一篇：无法用Swift解码器进行解码

下一篇：如何在php中创建soap xml请求