为什么尽管推动了元素，但我的温度阵列是否在第二使用效果中不包含元素？

Question

我正在尝试获取子主题数据，因此首先我必须获取用户注册的课程，然后在每门课程中，我都会获得章节，然后在每一章中，我都会得到主题，最后，我得到了每个主题的子主题并将它们全部推入温度阵列。 但是，当我尝试在第二个使用效果中打印它时，尽管在FetchSubtopics功能中打印了一个空数组，但它返回了一个空数组。

import React from "react";
import { useEffect, useState } from "react";
import { useLocation, Link } from "react-router-dom";
import { baseURL } from "../../../Apis";
 
function Lectures() {

let temp = [];
const [courses, setcourses] = useState(()=> {return null});
 useEffect(() => {
 const fun = async (e) => {
  const response = await fetch(`${baseURL}/user/profile`, {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${localStorage.getItem("token")}`,
    },
  });
  const json = await response.json();
  if (json.success) {
    setcourses(json.data.courses);
  }
};
fun();
}, []);

if(courses){
  courses.map((course)=>{
  return FetchChapter(course._id);  
})
}

// Now fetching chapters of each course
function FetchChapter(id){
const fun = async (e) => {
const response = await fetch(`${baseURL}/course/${id}?queryParam=0`, {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${localStorage.getItem("token")}`,
  },
});
const json = await response.json();
json.data.chapters.map((chapter)=>{
  return FetchTopic(id,chapter._id);
});
 
};
fun();
}
 
function FetchTopic(id,chapter_id){
const fun = async (e) => {
const response = await fetch(`${baseURL}/course/${id}/? 
 queryParam=1&chapterID=${chapter_id}`, {
    method: "GET",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${localStorage.getItem("token")}`,
    },
  });
  const json = await response.json();
    json.data.chapter.topics.map((topics)=>{
          topics.subTopics.map((topic)=>{
            FetchSubtopic(topic)
          })
    });     
 }
 fun()
}

function FetchSubtopic(topic){
 const fun = async (e) => {
 const response = await fetch(`${baseURL}/course/subtopics/${topic._id}`, {
  method: "GET",
  headers: {
    "Content-Type": "application/json",
    Authorization: `Bearer ${localStorage.getItem("token")}`,
  },
 });
 const json = await response.json();
  if(json.contentType == 0){
    temp.push(topic);          // pushing all the subtopics into temp array
    console.log(temp);   
  }
  }
  fun()
  }

 const [State, setState] = useState([]);

useEffect(() => {
console.log(temp);  // Why empty?????
setState(temp);
}, []);

return (<> some code... </>)

}
export default Lectures;

Answer 1

我认为您应该从内部 fun 而不是使用使用使用使用使用使用 useeffect 。

用空数组 [] 依赖性等于componentdidmount。
因此，一旦安装了组件，它就会被称为＆amp;不要等待提取完成。

Answer 2

由于JavaScript的事件循环，推动方法在您的情况下无法使用。
二人组合功能的异步行为，在堆栈更新您的数组之前，功能会启动功能。