fetching data from api in React Js failed

生来就可爱ヽ(ⅴ<●) 提交于 2020-01-06 05:36:05

问题


i'm new in react js and i'm trying to fetch data from My API , which i can its result with POSTMAN , and it shows the data My problem is when i use the link :" http://localhost:51492/api/user/1 " in my react js app , data couldn't appear ... PS : je travail avec Code SandBox here is my code showing all the followers of a user :

    import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import { List, Avatar, Button, Spin } from "antd";
import PropTypes from "prop-types";
import { withStyles } from "@material-ui/core/styles";

import reqwest from "reqwest";

const fakeDataUrl =
  "http://localhost:51492/api/follower/all/1";

class LoadMoreList extends React.Component {
  state = {
    loading: true,
    loadingMore: false,
    showLoadingMore: true,
    data: []
  };

  componentDidMount() {
    this.getData(res => {
      this.setState({
        loading: false,
        data: res.results
      });
    });
  }

  getData = callback => {
    reqwest({
      url: fakeDataUrl,
      type: "json",
      method: "get",
      contentType: "application/json",
      success: res => {
        callback(res);
      }
    });
  };

  onLoadMore = () => {
    this.setState({
      loadingMore: true
    });
    this.getData(res => {
      const data = this.state.data.concat(res.results);
      this.setState(
        {
          data,
          loadingMore: false
        },
        () => {
          // Resetting window's offsetTop so as to display react-virtualized demo underfloor.
          // In real scene, you can using public method of react-virtualized:
          // https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized
          window.dispatchEvent(new Event("resize"));
        }
      );
    });
  };

  render() {
    const { loading, loadingMore, showLoadingMore, data } = this.state;
    const loadMore = showLoadingMore ? (
      <div
        style={{
          textAlign: "center",
          marginTop: 12,
          height: 32,
          lineHeight: "32px"
        }}
      >
        {loadingMore && <Spin />}
        {!loadingMore && (
          <Button onClick={this.onLoadMore}>loading more</Button>
        )}
      </div>
    ) : null;
    return (
      <List
        style={{
          width: "50%",
          left: "25%"
        }}
        className="demo-loadmore-list"
        loading={loading}
        itemLayout="horizontal"
        loadMore={loadMore}
        dataSource={data}
        renderItem={item => (
          <List.Item
            actions={[
              <Button type="primary" icon="user-add">
                suivre
              </Button>,
              <a>Message</a>
            ]}
          >
            <List.Item.Meta
              avatar={
                <a>
                  <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />{" "}
                </a>
              }
              title={<a href="https://ant.design">{item.userProfile}</a>}
             />
          </List.Item>
        )}
      />
    );
  }
}

LoadMoreList.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles()(LoadMoreList);

and here is what PostMan shows when i enter the URL : http://localhost:51492/api/follower/all/1

what i thinks is missing is the "results attribute" at the beginning of the result in postman , i think it must be like that :

please help me , and thank u for ur interest

来源:https://stackoverflow.com/questions/51749624/fetching-data-from-api-in-react-js-failed

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!