Я пытаюсь задать имя для массива сообщения одного письма в то время, каждую секунду, пока не появится сообщение полностью

голоса
0

JavaScript код:

const [name, setName] = useState([]);
    const message = [C, h, a, s, e,  , L, i, p, s, c, o, m, b,  , W, e, b,  , D, e, v, e, l, o, p, e, r]
    let letter = ;
    const displayName = () => {
        for(var i = 0; i<message.length; i++) {
            letter += message[i];
            console.log(letter)
            setName(letter);
            setTimeout(function(){console.log(work);}, 1000)
        }
    }
    useEffect(() => {
        displayName();
      }, []);

useEffectвызывает displayName()функцию и следует добавить букву назвать каждую секунду. Когда я запустить приложение полное сообщение отображается имя. Но я хотел бы, чтобы добавить письмо каждую секунду.

Задан 14/12/2019 в 20:33
источник пользователем
На других языках...                            


2 ответов

голоса
0

Ниже код работает для меня:

  const string = ['t', 'h', 'i', 's', ' ', 'i', 's', ' ', 'i', 't'];
  const [name, setName] = useState("");

  useEffect(() => {
    if(name.length === string.length) {
      console.log("no more update")
      return;
    }
    const id = setTimeout(() => {
      setName(name + string[name.length])
    }, 1000);
    return () => clearInterval(id);
  }, [name]);
  return (<div>{name}</div>);

Два основных момента:

  • Я думаю, что есть возможности, чтобы сделать код более милым и читаемым человеком
  • Если вы заинтересованы в понимании того, как приведенный выше код работает , я бы рекомендовал вам пройти через руководство по useEffect . Она написана Дэном Абрамовым.
Ответил 14/12/2019 в 20:50
источник пользователем

голоса
0

Вы можете создать собственные пишущую крючок , который принимает массив или строку, и использует setInterval()для итерации создать строку путем добавления символов на интервал:

const { useState, useRef, useEffect } = React;

const useTypewriter = (message = []) => {
  const [txt, setTxt] = useState('');
  
  const intervalRef = useRef();

  useEffect(() => {
    let index = 0; // init the index
    
    clearInterval(intervalRef.current); // clear the interval if message changes
    
    if(!message.length) return; // do nothing if message is empty

    intervalRef.current = setInterval(() => {
      setTxt(t => t + message[index]);
      
      index += 1;

      if(index === message.length) clearInterval(intervalRef.current); // clear interval when message ends
    }, 1000);

    return () => clearInterval(intervalRef.current); // clear interval if component is unmounted
  }, [message, intervalRef, setTxt]);
  
  return [txt];
};

const App = ({ message }) => {
  const [txt] = useTypewriter(message);
  
  return <div>{txt}</div>
};

const message = ["C", "h", "a", "s", "e", " ", "L", "i", "p", "s", "c", "o", "m", "b", " ", "W", "e", "b", " ", "D", "e", "v", "e", "l", "o", "p", "e", "r"];

ReactDOM.render(
  <App message={message} />,
  root
);
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

Ответил 14/12/2019 в 20:57
источник пользователем

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more