Javascript 如何正确操作useEffect中的数据，以状态存储并显示在页面上

初学者在这里作出反应，需要帮助理解呈现事物的useEffect方法

在useEffect中执行的操作：

useEffect(() => {
        sendRequest("get", "induction/collections", res => {
            setInductionCollections(res.data);
        })
        console.log(inductionCollections, "inside useEffect")
        let holding = [...inductionCollections];
        holding.forEach((value, index) => {
            let collectionCourses = courses.filter(course => course.collections.includes(value.id));
            let userCompleted = completedCourses.filter(course => course.collections === value.id);
            if (collectionCourses === userCompleted) {
                holding[index].unlocked = true;
            } else {
                holding[index].unlocked = false;
            }
            if (value.position === 1) {
                holding[index].unlocked = true;
            }
        })
        setInductionCollections(holding);
        setIsLoading(true);
        
    }, [inductionCollections.length])

• 我们正在从database-sendRequest（）方法获取数据。（axios） 请求）
• 我们将数据存储在一个保持变量中，然后 操纵保持数据。基本上，我们向每个对象添加一个未锁定的字段 在这里，我们可以使用它来解锁或锁定页面上显示的内容。我们想要 我们的第一个对象始终处于解锁状态，然后，根据 useffect我们将解锁/锁定页面上剩余对象的内容
• 使用操纵的保持更新我们的SetImplicationCollections状态 数据

问题：

useEffect(() => {
        sendRequest("get", "induction/collections", res => {
            setInductionCollections(res.data);
        })
        console.log(inductionCollections, "inside useEffect")
        let holding = [...inductionCollections];
        holding.forEach((value, index) => {
            let collectionCourses = courses.filter(course => course.collections.includes(value.id));
            let userCompleted = completedCourses.filter(course => course.collections === value.id);
            if (collectionCourses === userCompleted) {
                holding[index].unlocked = true;
            } else {
                holding[index].unlocked = false;
            }
            if (value.position === 1) {
                holding[index].unlocked = true;
            }
        })
        setInductionCollections(holding);
        setIsLoading(true);
        
    }, [inductionCollections.length])

• 当依赖项数组为空时，未锁定的字段不是空的 添加到ImplicationCollections状态对象中，数据操作 在内部，Useffect不起作用

• 然后，我们在依赖项数组中添加了inclusioncollections.length （添加感应收集导致无限循环问题）和 然后我们注意到发生了两件事：

• 阵列的前几个控制台日志为空

• 其次，它们中有好几个包含被操纵的数据，并且没有被锁定 字段已添加，最近几个控制台日志包含对象，但 没有向其添加未锁定的字段

我们希望了解：

useEffect(() => {
        sendRequest("get", "induction/collections", res => {
            setInductionCollections(res.data);
        })
        console.log(inductionCollections, "inside useEffect")
        let holding = [...inductionCollections];
        holding.forEach((value, index) => {
            let collectionCourses = courses.filter(course => course.collections.includes(value.id));
            let userCompleted = completedCourses.filter(course => course.collections === value.id);
            if (collectionCourses === userCompleted) {
                holding[index].unlocked = true;
            } else {
                holding[index].unlocked = false;
            }
            if (value.position === 1) {
                holding[index].unlocked = true;
            }
        })
        setInductionCollections(holding);
        setIsLoading(true);
        
    }, [inductionCollections.length])

• useEffect是如何呈现内容的，这是否意味着在我们的例子中 初始渲染为空，数据仅基于 诱导收集。长度

• 我们如何确保数据被操纵，这样我们就可以 在JSX中使用collection.unlocked并使用 条件渲染

• 我们也不明白为什么会有这么多的console.log 打印以及为什么其中一些包含未锁定的字段和一些 他们不是

代码：

useEffect(() => {
        sendRequest("get", "induction/collections", res => {
            setInductionCollections(res.data);
        })
        console.log(inductionCollections, "inside useEffect")
        let holding = [...inductionCollections];
        holding.forEach((value, index) => {
            let collectionCourses = courses.filter(course => course.collections.includes(value.id));
            let userCompleted = completedCourses.filter(course => course.collections === value.id);
            if (collectionCourses === userCompleted) {
                holding[index].unlocked = true;
            } else {
                holding[index].unlocked = false;
            }
            if (value.position === 1) {
                holding[index].unlocked = true;
            }
        })
        setInductionCollections(holding);
        setIsLoading(true);
        
    }, [inductionCollections.length])