无法显示对网页的 API 调用结果
Unable to display API call result to WebPage
我已经从我调用 Django Rest API 的地方响应 App.js 页面,现在我得到的响应是一个数组,这个数组我有嵌套的组件,我希望列出该嵌套的组件在我的代码中。
如果我可以展示由一个人的名字给出的单个记录,当我尝试处理多个记录时,我会收到以下错误。
警告:数组或迭代器中的每个子项都应该有一个唯一的 "key" 属性。
现在如果我改变 API URL 如下
https://e2isaop.rokuapp.com/api/perns/1
我可以查看 HTML 中的数据,但当涉及到所有人时,它就失败了。
很抱歉,我是新手,不知道如何迭代结果的子数组。
请在这里指导我以获得最佳实践。
这是 API 在 JSON
中的回复
{
"count": 2,
"next": null,
"previous": null,
"results": [
{
"uri": "/api/Persons/1",
"PersonId": 1,
"PersonName": "Nirav Joshi",
"Person_Image": "https://ja.amazonaws.com/media/persons/None/51e1257926f3cb184089c41fa54b8f8e1b65a98f1e35d39e55f2b6b335e83cf4.jpg",
"Person_sex": "M",
"Person_BDate": "2019-04-19",
"Person_CDate": "2019-04-23"
},
{
"uri": "/api/Persons/2",
"PersonId": 2,
"PersonName": "New Joshi",
"Person_Image": "https://ja.amazonaws.com/media/persons/None/cc08baaad2ccc918bc87e14cac01032bade23a0733b4e313088d61ee78d77d64.jpg",
"Person_sex": "F",
"Person_BDate": "2011-11-21",
"Person_CDate": "2019-04-27"
},
]
}
这是反应 App.js 代码。
import React from "react";
import ReactDOM from "react-dom";
import Persons from "./Persons";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
persons: []
};
}
componentDidMount() {
fetch("https://e2isen.okuapp.com/api/psons/")
.then(response => response.json())
.then(data => {
let apipersons;
if (data.isNull) {
apipersons = [];
} else {
apipersons = [data];
console.log(apipersons);
}
this.setState({ persons: apipersons });
});
}
render() {
return (
<div>
<h1>Welcome to PersonAPI</h1>
<div>
{this.state.persons.map(pers => {
return (
<Persons
PersonName={pers.PersonName}
key={pers.PersonId}
Person_Image={pers.Person_Image}
Person_BDate={pers.Person_BDate}
Person_sex={pers.Person_sex}
/>
);
})}
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
它应该给我四个人的结果以及他们的详细信息
人名
人像
人物日期
性别
你应该这样做:
// apipersons = [data];
apipersons = data.results
我已经从我调用 Django Rest API 的地方响应 App.js 页面,现在我得到的响应是一个数组,这个数组我有嵌套的组件,我希望列出该嵌套的组件在我的代码中。
如果我可以展示由一个人的名字给出的单个记录,当我尝试处理多个记录时,我会收到以下错误。 警告:数组或迭代器中的每个子项都应该有一个唯一的 "key" 属性。
现在如果我改变 API URL 如下 https://e2isaop.rokuapp.com/api/perns/1
我可以查看 HTML 中的数据,但当涉及到所有人时,它就失败了。
很抱歉,我是新手,不知道如何迭代结果的子数组。 请在这里指导我以获得最佳实践。
这是 API 在 JSON
中的回复{
"count": 2,
"next": null,
"previous": null,
"results": [
{
"uri": "/api/Persons/1",
"PersonId": 1,
"PersonName": "Nirav Joshi",
"Person_Image": "https://ja.amazonaws.com/media/persons/None/51e1257926f3cb184089c41fa54b8f8e1b65a98f1e35d39e55f2b6b335e83cf4.jpg",
"Person_sex": "M",
"Person_BDate": "2019-04-19",
"Person_CDate": "2019-04-23"
},
{
"uri": "/api/Persons/2",
"PersonId": 2,
"PersonName": "New Joshi",
"Person_Image": "https://ja.amazonaws.com/media/persons/None/cc08baaad2ccc918bc87e14cac01032bade23a0733b4e313088d61ee78d77d64.jpg",
"Person_sex": "F",
"Person_BDate": "2011-11-21",
"Person_CDate": "2019-04-27"
},
]
}
这是反应 App.js 代码。
import React from "react";
import ReactDOM from "react-dom";
import Persons from "./Persons";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
persons: []
};
}
componentDidMount() {
fetch("https://e2isen.okuapp.com/api/psons/")
.then(response => response.json())
.then(data => {
let apipersons;
if (data.isNull) {
apipersons = [];
} else {
apipersons = [data];
console.log(apipersons);
}
this.setState({ persons: apipersons });
});
}
render() {
return (
<div>
<h1>Welcome to PersonAPI</h1>
<div>
{this.state.persons.map(pers => {
return (
<Persons
PersonName={pers.PersonName}
key={pers.PersonId}
Person_Image={pers.Person_Image}
Person_BDate={pers.Person_BDate}
Person_sex={pers.Person_sex}
/>
);
})}
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
它应该给我四个人的结果以及他们的详细信息 人名 人像 人物日期 性别
你应该这样做:
// apipersons = [data];
apipersons = data.results