как вернуть значение внутри интервала, для тега в reactJS - PullRequest
Новая
       36

как вернуть значение внутри интервала, для тега в reactJS

0 голосов
/ 27 апреля 2020

У меня есть этот код, и я хочу перенести его в тег в моем reactJS приложении. То, что он должен сделать, это медленно обновить let, чтобы раскрыть мое имя. Вроде как он расшифровывается.

Однако, похоже, он ничего не возвращает, logi c работает, так как console.log внутри интервала делает то, что ему нужно. Но ничего за пределами интервала нет. Может ли кто-нибудь помочь мне понять, как заставить это работать для тега 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;
    };

1 Ответ

1 голос
/ 27 апреля 2020

Расширяя мой комментарий, вот как вы можете сделать эту работу. Главное, что нужно помнить, это то, что компоненты React рендерится только тогда, когда меняется их реквизит или состояние. Вот рабочее решение с использованием состояния.

Измените соответствующий раздел render на 

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

В конструкторе включите this.state ={name: "Dwkuow Flexul"}

и переместите имя обновив logi c до 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, чтобы избежать утечек памяти в случае разрушения компонента рано. (Для которого потребуется переместить идентификатор интервала из локальной области действия componentDidMount в свойство всего компонента.)

...