我如何在前端显示我的get请求数据?

Question

这是我在前端显示get请求数据的代码

import React, { useEffect, useState } from "react";
import axios from "axios";
const Users = () => {
const [users, setusers] = useState({ collection: [] });
const [Error, setError] = useState();
useEffect(() => {
axios
.get("http://127.0.0.1:5000/users/users-list")
.then((response) => {
console.log(response.data);
// console.log(response.status);
// console.log(response.statusText);
// console.log(response.headers);
// console.log(response.config);
setusers({ collection: response.data });
return response.data;
})
.catch((error) => {
console.log({ Error: error });
setError(error);
// return error;
});
}, []);
return (
<div>
{users.collection.length > 0 &&
users.collection.map((element, i) => {
return (
<div key={i}>            
{element.Name}&#8209;{element.Email}
&#8209;{element.Message}
</div>
);
})}
{Error && <h2>{Error}</h2>}
</div>
);
};
export default Users;

正如您在下面的代码中看到的，我试图在浏览器网页中显示我的get数据。但它不是显示在浏览器中，而是显示在console.log()

Answer 1

首先不要使变量以大写字母开头，因为您在useState中使用了Error(指JavaScript中的Error类)。您可以显示不同状态的组件，如下所示:

const [isLoading, setIsLoading] = useState(false);
const [users, setUsers] = useState([]);
const [error, setError] = useState("");
useEffect(() => {
setIsLoading(true);
axios.get("http://127.0.0.1:5000/users/users-list")
.then((res => {
setUsers(res.data);
setIsLoading(false);
})
.catch(err => {
setError(err.response.data);
setIsLoading(false);
}
},[]);
if (isLoading) {
return <LoadingComponent />
}
if (error !== "") {
return <h1>{error}</h1>
}
if (users.length < 1) {
return <h1>There is no user.</h1>
}
return <div>
{users.collection.map((element, i) => {
return (
<div key={i}>            
{element.Name}&#8209;{element.Email}
&#8209;{element.Message}
</div>
);
})}
</div>

Answer 2

您实现它的工作与[{"Name":"T","Email":"[e-mail]","Message":"T user"}]API响应格式。只要检查你的API响应是什么，它应该渲染结果。

我注意到catch块必须设置错误信息而不是Err对象

import React, { useEffect, useState } from 'react';
import axios from 'axios';
const Users = () => {
const [users, setusers] = useState({ collection: [] });
const [Error, setError] = useState('');
useEffect(() => {
axios
.get('https://63a0075424d74f9fe82c476c.mockapi.io/api/collection/Test')
.then((response) => {
console.log(response.data);
// console.log(response.status);
// console.log(response.statusText);
// console.log(response.headers);
// console.log(response.config);
setusers({ collection: response.data });
})
.catch((error) => {
console.log({ Error: error });
setError('Something went wrong');
// return error;
});
}, []);
return (
<div>
{users.collection.length > 0 &&
users.collection.map((element, i) => {
return (
<div key={i}>
{element.Name}&#8209;{element.Email}
&#8209;{element.Message}
</div>
);
})}
{Error && <h2>{Error}</h2>}
</div>
);
};
export default Users;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 3

我测试了你的代码(使用不同的API)，没有发现任何问题。正如您在代码盒中看到的，这些值出现在屏幕上:

https://codesandbox.io/s/wonderful-ganguly-5ecbid?file=/src/App.js

我注意到你大写了对象属性，Name,Email和Message。也许这导致了你的问题。您将需要检查控制台日志对象，以查看属性是否大写。通常情况下，他们不会。所以你可以这样称呼它们:element.name,element.email和element.message。

Answer 4

我猜你的响应数据可能是你的问题。我不知道你的回答是什么，但它一定是数组。我用其他一些假的url替换了axios url，它起作用了。但是要记住，用户。集合必须是数组。因此，您需要确保响应。数据是数组。否则，需要设置响应。

user.collection.

import React, { useEffect, useState } from "react";
import axios from "axios";
const Users = () => {
const [users, setusers] = useState({ collection: [] });
const [Error, setError] = useState();
useEffect(() => {
axios
.get("https://jsonplaceholder.typicode.com/todos/1")
.then((response) => {
console.log(response.data);
setusers({ collection: [response.data] });
return response.data;
})
.catch((error) => {
console.log({ Error: error });
setError(error);
// return error;
});
}, []);
return (
<div>
{users.collection.length > 0 &&
users.collection.map((element, i) => {
return <div key={i}>{element.title}</div>;
})}
{Error && <h2>{Error}</h2>}
</div>
);
};
export default Users;