我正在尝试显示从本地服务器获取的数据，但收到错误

Question

这是组件： 此组件应该显示从我的本地主机服务器获取的数据

import React, {useState, useEffect} from 'react';

function FindJob(){
const [jobs, setJobs] = useState([]);
const [error, setError] = useState(null);
useEffect(() => {
fetch("http://localhost:5000/getjob")
.then(res => {
const results = res.json();
setJobs(results);
},
(error) => setError(error)
)
}, []);
if(error){
console.log(error);
} else {
console.log(jobs);
return <div>
{jobs.map(job => (
<h2>{job.post}</h2>
))}
</div>
}
}
export default FindJob;

这是我在运行 REACT 应用程序时遇到的错误，但我编写它就像 react.org 中关于 AJAX 调用的示例一样

×

Unhandled Rejection (TypeError): jobs.map is not a function
FindJob
C:/Users/user/Desktop/ben/jobconnect/jc-front/src/components/findjob.jsx:23
20 |     console.log(error);
21 | } else {
22 |     console.log(jobs);
> 23 |     return <div>
| ^  24 |         {jobs.map(job => (
25 |                 <h2>{job.post}</h2>
26 |             ))}
View compiled
▶ 17 stack frames were collapsed.
(anonymous function)
C:/Users/user/Desktop/ben/jobconnect/jc-front/src/components/findjob.jsx:12
9 | fetch("http://localhost:5000/getjob")
10 | .then(res => {
11 |     const results = res.json();
> 12 |     setJobs(results);
| ^  13 |     
14 | },
15 | (error) => setError(error)
View compiled

此数据尚未显示，但我能够安慰.log

这是从我的本地服务器获取的数据：

[
{
"_id": "5ed8f1494a9a902b38986dba",
"post": "general manager",
"organization": "oracle",
"description": "someone to oversee day to day operaetions",
"__v": 0
},
{
"_id": "5edf615e274cdb3c94847e5a",
"post": "developer",
"organization": "andela",
"description": "full stack developer",
"__v": 0
},
{
"_id": "5ee3a541e29e9e0be44cd370",
"__v": 0
}
]

Answer 1

问题是res.json()是异步的，所以你需要将它们与进一步的.then()调用链接起来 - 或使用async/await来避免大量的.then()调用或创建回调地狱。

因此，请尝试以下操作 - 只需遵循您的代码片段：

useEffect(() => {
fetch("http://localhost:5000/getjob")
.then(res => res.json())
.then(data => {
setJobs(data);
});
}, []);

我删除了错误处理，只是为了了解如何将fetch与.json()一起使用，所以不要忘记将其放回代码中。建议阅读的是使用提取，您可以在其中找到上述解决方案的示例。

我希望这有帮助！