问题
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