React 代码不会在挂载时渲染数据，但可以在渲染上工作

Question

处理来自 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 挂钩中，并且它有效，但我正在尝试清理代码并使其更加简洁。

Answer 1

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

 状态。如果没有在任何地方使用，请随意删除它。

Answer 2

我正在检查您的代码并修复问题并更新您的代码。 请用此替换您的代码。

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 状态并同时调用它。 第二次数据即将到来，因为该时间数据已在状态中设置。