我想呈现所有用户的电子邮件用于测试目的,事实上我已经使用此方法完成了。--- {dataFromApi.map((item,i)=〉{item.email}
)}但还是不行
const [dataFromApi, setDataFromApi] = useState([]);
const URL = 'http://localhost:5000/users'
const requestOptions = {
method: 'GET',
headers: {
'Content-Type': 'application/json'
},
}
const submit = () => {
const data = fetch(URL, requestOptions);
data.then( (userdata) => {
return userdata.json();
}).then( (data) => {
setDataFromApi(data[0]);
}).catch( (err) => {
console.log(err);
})
}
return (
<div className="login">
<h1 className="loginTitle">Choose a Login Method</h1>
<p>{dataFromApi}</p>
<div className="wrapper">
.
.
.
.
.
以下是API响应
[
{
"id": 1,
"email": "test1234@gm.com",
"password": null
},
{
"id": 2,
"email": null,
"password": null
},
{
"id": 3,
"email": "test@123.com",
"password": "12345678"
},
{
"id": 4,
"email": "test@231.com",
"password": "12345678"
},
{
"id": 5,
"email": "test@231.com",
"password": "12345678"
},
{
"id": 6,
"email": "test@231.com",
"password": "12345678"
},
{
"id": 7,
"email": "NEWtest@231.com",
"password": "123"
}
]
但是得到这个错误
react_devtools_backend.js错误代码:4012以上错误发生在
组分:
以及
js:14887未捕获的错误:对象作为React子级无效(找到:键为{id,email,password}的对象)。如果要呈现子对象的集合,请改用数组。
2条答案
按热度按时间yh2wf1be1#
就像Adam在评论中说的那样,你试图把一组东西打包成一个标记,你应该迭代列表,为每一项呈现一个东西。
8yparm6h2#
我得到了为什么没有得到预期输出的答案,因为在这段代码中
}
此处setDataFromApi(data[0])将仅存储1个对象,要访问对象中的电子邮件,我们必须仅使用dataFromApi.email