Javascript UseEffect React钩子中的空innerText

我很难理解useEffect是如何工作的。 我有一段代码如下：

import React, { useState, useEffect, useLayoutEffect, useRef, createRef } from "react";
import {Link} from "react-router-dom";
import LoadingPage from "../LoadingPage";
import Slideshow from "../SlideShow"
import CircleType from "circletype";

function Home() {
  const categories = ["advance beauty", "beauty", "special effects", "airbrush", "others"]
  const images = useState(
    [[
      "/images/elegant_sugar_skull4.jpg",
      "/images/elegant_sugar_skull3.jpg",
      "/images/elegant_sugar_skull1.jpg"
    ],
    [
      "/images/3looks1.jpg",
      "/images/3looks4.jpg",
      "/images/3looks5.jpg"
    ],
    [
      "/images/daemon_of_buddha1.jpg",
      "/images/daemon_of_buddha6.jpg",
      "/images/daemon_of_buddha7.jpg"
    ],
    [
      "/images/gangstar4.jpg",
      "/images/gangstar2.jpg",
      "/images/gangstar6.jpg"
    ],
    [
      "/images/sculpture1.jpg",
      "/images/sculpture6.jpg",
      "/images/henna1.jpg"
    ]]);

useEffect(() => {
        const slideshow = new Slideshow(document.querySelector('.slideshow'));
        const topText = document.querySelectorAll('.bottom');
        console.log(topText[0].innerText);
        topText.forEach(text=>{
          console.log(text.innerText)
          new CircleType(text).radius(384)
        })
  }, []); 

return (
<div className="slideshow">
        {categories.map((category, index) => (
            <div className="slide" key={index}>
            <div className="slide__number white-text">0{index + 1}</div>
              <div className="slide__img-wrap">
                <img className="slide__img" src={images[0][index][0]} onLoad={checkLoaded} alt="img" />
                <img className="slide__img2" src={images[0][index][1]} onLoad={checkLoaded} alt="img" />
                <img className="slide__img3"  src={images[0][index][2]} onLoad={checkLoaded} alt="img" />
                <div className="slide__img-reveal"></div>
              </div>
              {category.includes(" ") ?
              <div className="slide__title">
                <h1 className="white-text top">{category.split(" ")[0]}</h1>
                <h1 className="white-text bottom" ref={bottomText}>{category.split(" ")[1]}</h1>
                </div>
                :
                <div className="slide__title">
              <h1 className="white-text bottom" ref={bottomText}>{category}</h1>
              </div>
              }          
              </div>))      
        }
        <div className="total-images white-text">05</div>
      </div> 
)

import React，{useState，useffect，useLayoutEffect，useRef，createRef}来自“React”；
从“react router dom”导入{Link}；
从“./LoadingPage”导入LoadingPage；
从“./幻灯片放映”导入幻灯片放映
从“CircleType”导入CircleType；
函数Home（）{
const categories=[“高级美容”、“美容”、“特效”、“喷枪”、“其他”]
const images=useState(
[[
“/images/lateral\u sugar\u skull4.jpg”，
“/images/lateral\u sugar\u skull3.jpg”，
“/images/lateral\u sugar\u skull1.jpg”
],
[
“/images/3looks1.jpg”，
“/images/3looks4.jpg”，
“/images/3looks5.jpg”
],
[
“/images/daemon\u of_buddha1.jpg”，
“/images/daemon\u of_buddha6.jpg”，
“/images/daemon\u of_buddha7.jpg”
],
[
“/images/gangstar4.jpg”，
“/images/gangstar2.jpg”，
“/images/gangstar6.jpg”
],
[
“/images/sculpture1.jpg”，
“/images/sculpture6.jpg”，
“/images/henna1.jpg”
]]);
useffect（（）=>{
const slideshow=新的幻灯片放映（document.querySelector（'.slideshow'）；
const topText=document.querySelectorAll（'.bottom'）；
console.log（topText[0].innerText）；
topText.forEach（text=>{
console.log（text.innerText）
新圆圈类型（文本）。半径（384）
})
}, []); 
返回(
{categories.map（（类别，索引）=>(
0{index+1}
{category.includes（“”）？
{category.split（“”[0]}
{category.split（“”[1]}
:
{类别}
}          
))      
}
05
)

我基本上是为每个类别（3张图片，每张幻灯片1个标题）绘制幻灯片的幻灯片。我使用下面的外部WebGL库（根据我的需要进行了修改）：

然后，我尝试将CircleType JS库应用于我的标题文本（顶部和底部，但我只是使用顶部atm进行测试）：

但是，当我尝试这样做时，标题的innerText返回一个空值，即使文本是明显的。因此，在我创建一个新的CircleType实例后，文本将消失，我无法检查它是否正确弯曲

我尝试了一些方法来解决这个问题，但没有成功。我发现的关键是， 1.

useffect

中顶部标题的

innerText

为空，但当I

console.log（innerHTML）

时，文本就在那里。 2.由于（1）是真的，我继续，使

useffect

中标题的

innerText

等于

innerHTML

，但是当DOM完全呈现时，文本只是成为该特定文本的完整div标记。无论如何，文本不是弯曲的

我认为空括号中的

useffect

==

componentDidMount

，但如果是这种情况，我不知道为什么会发生这种情况

如果有人能就此事给我一些提示或见解，我将不胜感激

---

谢谢您的时间。

我怀疑

[]

作为

useffect

中的第二个参数是麻烦制造者。它会导致

useffect

使用默认道具和统计信息只调用一次。请尝试删除它：

useffect（（）=>{
const slideshow=新的幻灯片放映（document.querySelector（'.slideshow'）；
const topText=document.querySelectorAll（'.bottom'）；
console.log（topText[0].innerText）；
topText.forEach（text=>{
console.log（text.innerText）
新圆圈类型（文本）。半径（384）
})
}); 

在便条中陈述

如果要运行一个效果并只清理一次（装载和卸载时），可以传递一个空数组（

[]

）作为第二个参数。这告诉React，您的效果不依赖于来自道具或状态的任何值，因此它永远不需要重新运行。这不是作为特殊情况处理的-它直接遵循依赖项数组的工作方式

如果传递空数组（

[]

），效果中的道具和状态将始终具有其初始值由于第二个参数更接近于熟悉的

componentDidMount

和

componentWillUnmount

心智模型，因此通常有更好的解决方案来避免频繁重新运行效果。此外，不要忘了React会将运行useffect延迟到浏览器绘制之后，因此做额外的工作不是什么问题

---

我怀疑

[]

作为

useffect

中的第二个参数是麻烦制造者。它会导致使用默认道具和统计信息只调用一次

useffect

。请尝试删除它：

useffect（（）=>{
const slideshow=新的幻灯片放映（document.querySelector（'.slideshow'）；
const topText=document.querySelectorAll（'.bottom'）；
console.log（topText[0].innerText）；
topText.forEach（text=>{
console.log（text.innerText）
新圆圈类型（文本）。半径（384）
})
}); 

在便条中陈述

如果要运行一个效果并只清理一次（装载和卸载时），可以传递一个空数组（

[]

）作为第二个参数。这告诉React，您的效果不依赖于来自道具或状态的任何值，因此它永远不需要重新运行。这不是作为特殊情况处理的-它直接遵循依赖项数组的工作方式

如果传递空数组（

[]

），效果中的道具和状态将始终具有其初始值