[英]How can I make this interval stop when it reaches the end of the array?
I am trying to make a little animation with an array where it kind of types out my name like in a command prompt.我正在尝试用一个数组制作一个小动画,它可以像在命令提示符中一样输入我的名字。 This is my first time using hooks in react so I'm kind of lost.
这是我第一次在反应中使用钩子,所以我有点迷路了。 I'd like to make it so that the interval stops at "Felipe Garcia Diaz" but instead of it stopping the interval just makes my text disappear and it continues to run in the background.
我想让间隔停止在“Felipe Garcia Diaz”,但不是停止间隔,而是让我的文本消失,它继续在后台运行。 What am i doing wrong exactly?
我到底在做什么错?
HooksExample.jsx 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;
Some feedback:一些反馈:
setInterval()
and pass it into clearInterval()
setInterval()
返回的值并将其传递给clearInterval()
useEffect()
useEffect()
中useEffect()
to access latest climber
value, it must be in the dependency array like [climber]
useEffect()
访问最新的climber
值,它必须在依赖数组中,如[climber]
myName
does not need to be in state because its value can be derived from introArray
myName
不需要处于状态,因为它的值可以从introArray
派生introArray
with string for simplicity's sake, if you really want to use array then corresponding JSX is <h1>{introArray[climber]}</h1>
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>
);
}
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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.