处理来自 GreatFrontEnd 的从作业 api 获取数据的问题,首先我必须获取 ids,然后映射 ids 以返回作业对象的数组。我遇到一个问题,什么都不会显示,但是当我更改代码中的一些小内容时,例如删除并添加回括号(我相信这模拟了编辑器中的重新渲染),数据就会显示出来。
import React, { useState, useEffect } from 'react';
export default function App() {
const [jobsIds, setJobIds] = useState(null);
const [jobs, setJobs] = useState([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
getJobs();
console.log(jobs)
}, []);
const getJobIds = async () => {
try {
const idRes = await fetch(`https://hacker-news.firebaseio.com/v0/jobstories.json`);
const jobIds = await idRes.json();
setJobIds(jobIds);
} catch (error) {
console.error('Error fetching job IDs:', error);
}
}
const getJobs = async () => {
await getJobIds()
try {
setLoading(true);
const jobsData = await Promise.all(
jobsIds.map(async (id) => {
const jobRes = await fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json`);
return await jobRes.json();
})
);
setJobs(jobsData)
setLoading(false);
} catch (error) {
console.error('Error fetching jobs:', error);
setLoading(false);
}
};
return (
<>
{loading? <p> Loading.... </p>: jobs.map((job) =>(
<p> {job.title} </p>
))}
</>
);
}
`
早些时候,我尝试将每个 fetch 函数放入自己的 useeffect 挂钩中,并且它有效,但我正在尝试清理代码并使其更加简洁。
const getJobs = async () => {
await getJobIds()
try {
setLoading(true);
const jobsData = await Promise.all(
jobsIds.map(
您映射的这个
jobsId
数组是组件渲染时存在的 jobsIds 数组。它不包括调用 getJobIds
产生的任何值。您将需要更改 getJobIds 以返回新的 id,以便您可以映射它们。
const getJobIds = async () => {
try {
const idRes = await fetch(`https://hacker-news.firebaseio.com/v0/jobstories.json`);
const jobIds = await idRes.json();
setJobIds(jobIds);
return jobIds; // <------- added
} catch (error) {
console.error('Error fetching job IDs:', error);
}
}
const getJobs = async () => {
const jobsIds = await getJobIds();
// Same code, but now using the returned ids
有了这个,您甚至可能不需要 jobsIds
状态。如果没有在任何地方使用,请随意删除它。
import React, { useState, useEffect } from 'react';
export default function App() {
const [jobs, setJobs] = useState([]);
const [loading, setLoading] = useState(false);
useEffect(() => {
getJobs();
console.log(jobs)
}, []);
const getJobIds = async () => {
try {
const idRes = await fetch(`https://hacker-news.firebaseio.com/v0/jobstories.json`);
const jobIds = await idRes.json();
console.log('jobIds', jobIds);
return jobIds
} catch (error) {
console.error('Error fetching job IDs:', error);
}
}
const getJobs = async () => {
const jobIds = await getJobIds();
if(jobIds){
try {
setLoading(true);
const jobsData = await Promise.all(
jobIds?.map(async (id) => {
const jobRes = await fetch(`https://hacker-news.firebaseio.com/v0/item/${id}.json`);
return await jobRes.json();
})
);
setJobs(jobsData)
setLoading(false);
} catch (error) {
console.error('Error fetching jobs:', error);
setLoading(false);
}
}
};
return (
<>
{loading? <p> Loading.... </p>: jobs?.map((job) =>(
<p key={job?.id}> {job?.title} </p>
))}
</>
);
}
注意 您同时设置此 setJobIds 状态并同时调用它。 第二次数据即将到来,因为该时间数据已在状态中设置。