当它到达数组末尾时，我怎样才能让这个间隔停止？

Question

我正在尝试用一个数组制作一个小动画，它可以像在命令提示符中一样键入我的名字。这是我第一次在反应中使用钩子，所以我有点迷路了。我想让间隔停止在“Felipe Garcia Diaz”，但不是停止间隔只是让我的文本消失，它继续在后台运行。我究竟做错了什么？

HooksExample.jsx

import React, {useState} from 'react';
import socket from './socket';

function Main(props) {
    let introArray = ["_","F_", "Fe_", "Fel_", "Feli_", "Felip_", "Felipe_", "Felipe _", "Felipe G_", "Felipe Ga_", "Felipe Gar_", "Felipe Garc_", "Felipe Garci_", "Felipe Garcia_"];

    let [myName, setName] = useState(introArray);
    let [climber, setClimber] = useState(0);

    let block = false;
    if(block === false) {
        let climbArray = () => {
            setClimber(climber += 1);
            if(climber === introArray.length) {
                block = true;
                console.log('dead');
            }
            console.log('live', climber);
        }
        setInterval(climbArray, 200);
    }
    return (
        <React.Fragment>
            <h1>{myName[climber]}</h1>
        </React.Fragment>
    );
}


export default Main;

Answer 1

import React, {useState} from 'react';
import socket from './socket';

function Main(props) {
    let introArray = ["_","F_", "Fe_", "Fel_", "Feli_", "Felip_", "Felipe_", "Felipe _", "Felipe G_", "Felipe Ga_", "Felipe Gar_", "Felipe Garc_", "Felipe Garci_", "Felipe Garcia_"];
let interval 
    let [myName, setName] = useState(introArray);
    let [climber, setClimber] = useState(0);

    let block = false;
    if(block === false) {
        let climbArray = () => {
            setClimber(climber += 1);
            if(climber === introArray.length) {
                block = true;
                if(interval !== undefined){
                  clearInterval(interval)
                }
              
                console.log('dead');
                
            }
            console.log('live', climber);
        }
        interval = setInterval(climbArray, 200);
    }
    return (
        <React.Fragment>
            <h1>{myName[climber]}</h1>
        </React.Fragment>
    );
}


export default Main;

Answer 2

一些反馈：

要清除间隔，您需要存储从 setInterval() 返回的值并将其传递给 clearInterval()
触发间隔和更新状态是副作用，因此应包含在 useEffect()
为了 useEffect() 访问最新的 climber 值，它必须在 [climber]
myName 不需要处于状态，因为它的值可以从 introArray
为了简单起见，我用字符串 array 替换了 introArray，如果你真的想使用数组，那么对应的 JSX 是 <h1>{introArray(climber)}</h1>

import React, {useState, useEffect} from 'react';
import "./styles.css";

export default function App() {
  const intro = "Felipe Garcia_";
  const [climber, setClimber] = useState(0);

  useEffect(()=>{
    const interval = setInterval(() => {
      if (climber === intro.length) {
        console.log('clearing');
        clearInterval(interval);
      } else {
        setClimber((val) => val + 1);
      }
    }, 200);
    // clean up interval on unmount
    return (()=>{
      clearInterval(interval);
    });
  }, [climber]);

  return (
      <React.Fragment>
        <h1>
          {intro.substring(0, climber)}_
        </h1>
      </React.Fragment>
  );
}

Working example

当它到达数组末尾时，我怎样才能让这个间隔停止？

How can I make this interval stop when it reaches the end of the array?

javascript

arrays

setinterval

reactjs

react-hooks