Javascript 如何为reactJS中的标记返回间隔内的值

我有这个代码，我想把它移植到我的reactJS应用程序中的一个标记中。它应该做的是慢慢地更新let以显示我的名字。有点像被解密了

但是，它似乎没有返回任何内容，逻辑是有效的，因为间隔内的console.log执行它需要执行的操作。但任何超出间隔的都不会。有人能帮我理解如何在我的react应用程序中使用html标记吗

   <h3 className="center-align" id="my_name">
       {this.hackerLoad()}
   </h3>
//^^^^^^^ this is the small section i need to edit,
// i didn't want to add a bunch of non relevant code. this is inside my return(); 



   hackerLoad = () => {
        console.log("loaded");
        let hiddenName = [
            "Dwkuow Flexul",
            "Dwkuow Flexua",
            "Dwkuow Flexia",
            "Dwkuow Flecia",
            "Dwkuow Flrcia",
            "Dwkuow Farcia",
            "Dwkuow Garcia",
            "Dwkuoe Garcia",
            "Dwkupe Garcia",
            "Dwkipe Garcia",
            "Dwlipe Garcia",
            "Delipe Garcia",
            "Felipe Garcia",
        ];
        let i = 0;
        let name = "Dwkuow Flexul";
        const createDevName = setInterval(() => {
            i += 1;
            if (i > 12) {
                clearInterval(createDevName);
            }
            name = hiddenName[i];
            console.log(name);
        }, 500);

        return name;
    };

{this.hackerLoad（）}
//^^^^^^^这是我需要编辑的小部分，
//我不想添加一堆不相关的代码。这在我的报税表内（）；
黑客负载=（）=>{
控制台日志（“已加载”）；
设hiddenName=[
“Dwkuow Flexul”，
“Dwkuow Flexua”，
“Dwkuow Flexia”，
“Dwkuow Flecia”，
“Dwkuow Flrcia”，
“Dwkuow Farcia”，
“Dwkuow Garcia”，
“Dwkuoe Garcia”，
“Dwkupe Garcia”，
“Dwkipe Garcia”，
“德利普·加西亚”，
“Delipe Garcia”，
“菲利佩·加西亚”，
];
设i=0；
让name=“Dwkuow Flexul”；
const createDevName=setInterval（（）=>{
i+=1；
如果（i>12）{
clearInterval（createDevName）；
}
name=hiddenName[i]；
console.log（名称）；
}, 500);
返回名称；
};

根据我的评论展开，下面是您如何实现这一点的。要记住的关键是，React组件只有在其道具或状态发生变化时才会重新启动。下面是一个使用状态的工作解决方案

将渲染的相关部分更改为

<h3 className="center-align" id="my_name">
   {this.state.name}
</h3>

---

您还应该清除

组件willunmount

中的间隔，以避免组件过早损坏时内存泄漏。（需要将间隔id从

componentDidMount

的本地范围移动到整个组件的属性中。）

只需更改闭包中的

name

变量不会导致重新加载。您需要在组件状态下存储

name

的更改内容。我对react非常陌生，我不确定您的意思。我知道返回名称没有得到实际名称/正在更新，因为它不在时间间隔的范围内。但是我不知道如何去实现它，以便它在完成它的组件中生成谢谢。我理解那里的大部分代码，并在谷歌上搜索了一些我不太懂的东西。我甚至不知道像componentDidMount这样的东西！因此，我将研究所有这些，以便更好地理解。我不太明白的一件事是为什么我需要一个构造函数？你在构造函数中初始化状态，这样你就可以在初始渲染中得到正确的东西。

componentDidMount = () => {
    let hiddenName = [
        "Dwkuow Flexul",
        "Dwkuow Flexua",
        "Dwkuow Flexia",
        "Dwkuow Flecia",
        "Dwkuow Flrcia",
        "Dwkuow Farcia",
        "Dwkuow Garcia",
        "Dwkuoe Garcia",
        "Dwkupe Garcia",
        "Dwkipe Garcia",
        "Dwlipe Garcia",
        "Delipe Garcia",
        "Felipe Garcia",
    ];
    let i = 0;
    let name = "Dwkuow Flexul";
    const createDevName = setInterval(() => {
        i += 1;
        if (i > 12) {
            clearInterval(createDevName);
        }
        this.setState({name: hiddenName[i]});
    }, 500);
};