Невозможно получить значение Usestate в функции

Question

Я хочу иметь мигающий курсор в ...

Я написал этот код, но я не могу понять, почему он не работает.

const [cursor,setCursor]=useState<string>("");

function blink(){

    if(cursor == '|'){
        setCursor("")
    }
    else{
        setCursor("|")
    }
    setTimeout(function(){ blink()}, 1000);
}


useEffect(() => {
    blink();
   }, []);


    return (
        <div>
            <span>{text}</span><span>{cursor}</span>
        </div>
    );
};

Заранее спасибо: )

Answer 1

function blink(){
    if(cursor == '|'){
        setCursor("")
    }
    else{
        setCursor("|")
    }
}

useEffect(() => {
    setTimeout(blink, 1000); // <- move setTimeout to here
}, [cursor]);  // <- and you need to pass cursor as a dep

Answer 2

Похоже, вы хотели это:

const [cursor, setCursor] = useState('');

useEffect(() => {
  const handle = setInterval(() => {
    setCursor(oldCursor => oldCursor === '|' ? '' : '|');
  }, 1000);

  return () => {
    clearInterval(handle);
  };
}, [setCursor]);

return (
  <div>
    <span>{text}</span><span>{cursor}</span>
  </div>
);