如何在间隔内返回一个值，用于reactJS中的标签答案

【问题标题】：how to return a value inside an interval, for a tag in reactJS如何在间隔内返回一个值，用于reactJS中的标签
【发布时间】：2020-04-26 22:30:59
【问题描述】：

我有这段代码，我想将它移植到我的 reactJS 应用程序中的标签中。它应该做的是慢慢更新让我们透露我的名字。有点像被解密了。

但是它似乎没有返回任何东西，逻辑是有效的，因为间隔内的 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;
    };

【问题讨论】：

仅仅改变闭包中的name 变量不会导致重新渲染。您需要将 name 的更改内容存储在组件的状态中。
我对 react 很陌生，我不确定你的意思。我知道返回名称没有得到实际名称/正在更新，因为它不在时间间隔的范围内。但我不确定如何实现它以便它在组件中生成

标签： javascript reactjs scope return setinterval

【解决方案1】：

扩展我的评论，这里是如何使这项工作。要记住的关键是 React 组件仅在它们的 props 或它们的状态发生变化时才会重新渲染。这是一个使用状态的有效解决方案。

将render的相关部分改为

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

在构造函数中，包含this.state ={name: "Dwkuow Flexul"}

并将名称更新逻辑移至componentDidMount，使用setState更新名称：

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);
};

您还应该清除componentWillUnmount 中的间隔，以避免在组件过早销毁的情况下发生内存泄漏。（这需要将区间 id 从 componentDidMount 的本地范围移动到整个组件的属性。）

【讨论】：

做到了，谢谢。我了解那里的大部分代码，并进行了一些谷歌搜索以了解我不太了解的内容。我什至不知道 componentDidMount 之类的东西！因此，我将研究所有这些以更好地理解。我不太明白的一件事是为什么我需要一个构造函数？
您在构造函数中初始化状态，以便在初始渲染时获得正确的内容。