在 React 中每两秒更改一次占位符文本

Question

I'm trying to change the set state value every two seconds and can run in a loop but that does not seem to work with the below logic.

Excerpt from my code

 const placeholderText = ["one", "two", "three"];
  const [state, setState] = useState("");

  useEffect(() => {
    placeholderText.map((val, index) =>
      setTimeout(() => {
        setState(placeholderText[index]);
      }, 2000)
    );
  }, []);

  console.log(state);

When I try to console log the state , I get three values at a time after two seconds. How can I set the state every two seconds and run it in a loop so that it keeps changing?

I created a working example using CodeSandbox . Could anyone please help?

Answer 1

You can make use of setInterval instead of setTimeout .

Also, we can simplify the implementation in such a way that, we don't have to store the actual text in the state, rather we can store the index. And update the same after the stipulated interval.

 const {useState, useEffect} = React; const placeholderText = ["one", "two", "three"]; const Test = () => { const [index, setIndex] = useState(0); useEffect(() => { const timer = () => { setIndex(prevIndex => { if(prevIndex === placeholderText.length - 1){ return 0; } return prevIndex + 1; }) }; setInterval(timer, 2000); //cleanup function in order clear the interval timer //when the component unmounts return () => { clearInterval(timer); } }, []); return <p>{placeholderText[index]}</p> } ReactDOM.render(<Test />, document.getElementById("react"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script> <div id="react"></div>

Here, in the example for the simplicity I have used placeholderText outside the component. This can be passed as prop to the component and use in the component like below and use the same as dependency to the useEffect hook.

ReactDOM.render(<Test text={placeholderText}/>, document.getElementById("react"));

Answer 2

You are scheduling them all at the same time so they appear at the same time 2 secs later. I would do it like so:

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

const delayExecution = (mls) => {
  return new Promise((resolve) => {
    setTimeout(() => resolve("ok"), mls);
  });
};

export default function App() {
  const placeholderText = ["one", "two", "three"];
  const [state, setState] = useState("");

  const changePlaceholder = async () => {
    for (let i = 0; i < placeholderText.length; i++) {
      await delayExecution(2000);
      setState(placeholderText[i]);
    }
  };

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

  return (
    <div className="App">
      <input type="text" placeholder={state} />
    </div>
  );
}

delayExecution resolves a promise after a set number of millisecs and thus can be awaited. The async function changePlaceholder does the rest.

Sandbox: https://codesandbox.io/s/priceless-worker-4v4yc?file=/src/App.js

Answer 3

You can use setInterval instead of setTimeout to update the text in every 2 seconds. Something like this:

export default function App() {
  const placeholderText = ["one", "two", "three"];
  const [state, setState] = useState(0);

  useEffect(() => {
    setInterval(() => {
      setState((s) => (s + 1));
    }, 2000);
  }, []);

  const placeholder = placeholderText[state % placeholderText.length]
  return (
    <div className="App">
      <h1>Hello CodeSandbox {placeholder}</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

Answer 4

Its happening because of closure. If you want to change in each 2s. You need setInterval not setTimeout . One way to tackle this use IIFE function so that it uses each loop value in setInterval instead of loop final one. Here is the code:

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

export default function App() {
  const placeholderText = ["one", "two", "three"];
  const [state, setState] = useState(0);

  useEffect(() => {
    let interval;

    interval = setInterval(() => {
      setState(function (prev) {
        if (prev === 2) {
          setState(0);
        } else {
          setState(prev + 1);
        }
      });
    }, 2000);

    return () => {
      interval && clearInterval(interval);
    };
  }, []);

  console.log(placeholderText, state);
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {placeholderText[state]}
    </div>
  );
}

here is the demo: https://codesandbox.io/s/magical-swirles-83d8m?file=/src/App.js:0-718