单击 2 次后按钮文本从 Goodbye 变为 Hello？

Question

出于某种原因，每当我在我的 React TS 项目中使用它时，我需要按两次按钮才能将文本从“再见”更改为“你好”，而不是相反？

import { useState } from 'react' 

const ChangeTextButton = () => {

    const [buttonText, setButtonText] = useState("Click me!")
    var changedBefore = false;

    function changeText() {
        
        if (changedBefore) {
            setButtonText("Hello")
        } else {
            setButtonText("Goodbye")
        }
        
        changedBefore = !changedBefore
        return buttonText;
    }

    return(
        <button onClick={() => changeText()}>{buttonText}</button>
    );
}

export default ChangeTextButton;

是的，我知道这是糟糕的代码，我对整个 TypeScript 和 JS 比较陌生。

Answer 1

发生这种情况是因为您的 changedBefore 变量将在每次重新渲染后设置为 false。

所以它从 false 开始，在第一次单击时它会将文本按钮更改为“再见”并重新呈现。重新渲染会将值再次设置回 false。下一次点击会将文本再次更改为“再见”，但由于它与实际状态相同，因此不会触发重新渲染，因此您的 changedBefore 将在下一次点击时变为 true，即最终会将文本更改为“Hello”

如果您想避免这种行为，您将不得不为您的 changedBefore 变量使用 useState 或 useRef，如下所示：

import { useState } from 'react' 

const ChangeTextButton = () => {

    const [buttonText, setButtonText] = useState("Click me!")
    const [changedBefore, setChangedBefore] = useState(false);

    function changeText() {
        
        if (changedBefore) {
            setButtonText("Hello")
        } else {
            setButtonText("Goodbye")
        }
        
        setChangedBefore(cb => !cb)
    }

    return(
        <button onClick={() => changeText()}>{buttonText}</button>
    );
}

export default ChangeTextButton;

演示：https://stackblitz.com/edit/react-wuulup?file=src%2FApp.js

单击 2 次后按钮文本从 Goodbye 变为 Hello？

Button text changes from Goobye to Hello after 2 clicks?

typescript

react-typescript