为什么for循环对同一索引计数两次?

将useEffect修改为:

 useEffect(() => {
    const str = "How may I help you today?";
    const letters = Array.from(str);
    let timerId: NodeJS.Timeout; // Declare a variable to hold the timeout ID

    const addLetterWithDelay = (index: number) => {
        if (index < letters.length) {
            timerId = setTimeout(() => {
                setPlaceholder(prevPlaceholder => prevPlaceholder + letters[index]);
                addLetterWithDelay(index + 1);
            }, 1000); // Delay of 1 second
        }
    };

    addLetterWithDelay(0); // Start adding letters from index 0

    return () => clearTimeout(timerId); // Clear the timeout when the component is unmounted or the useEffect hook re-runs
}, []);

通过这种方式,如果您的组件重新渲染并再次调用useEffect钩子,则会清除当前超时,并终止addLetterWithDelay方法。

您遇到的问题是由于React的状态更新与setTimeout函数的工作方式造成的。当您在setTimeout回调内调用setPlaceholder时,React将安排状态更新,但在执行setTimeout回叫之前,组件可能已经用以前的状态重新呈现。这可能会导致意外行为,例如字符串被添加两次。

要解决此问题,可以使用setPlaceholder的函数形式,它将以前的状态作为参数。这样可以确保您始终根据最新的值更新状态。

const [placeholder, setPlaceholder] = useState<string>('')

useEffect(() => {
    const str = "How may I help you today?";
    const letters = Array.from(str);

    const addLetterWithDelay = (index: number) => {
        if (index < letters.length) {
            setTimeout(() => {
                setPlaceholder(prevPlaceholder => prevPlaceholder + letters[index]);
                addLetterWithDelay(index + 1);
            }, 1000); // Delay of 1 second
        }
    };

    addLetterWithDelay(0); // Start adding letters from index 0
}, []);

通过使用setPlaceholder的函数形式,可以确保每次更新都基于最新状态,从而防止字符串被添加两次的问题。