如何实现React useState点击双向切换按钮文本（List/Grid）？

你只需要修改handleClick函数，根据当前的buttonText状态值来切换文本内容即可，以下是两种常用实现方式：

方式一：直接判断当前状态值 #

const [buttonText, setButtonText] = useState('List');
function handleClick() {
    setButtonText(buttonText === 'List' ? 'Grid' : 'List');
};

方式二：函数式更新（更稳妥） #

如果组件存在异步更新场景，或者需要严格依赖前一次状态值时，推荐使用函数式更新，它能确保获取到最新的状态：

const [buttonText, setButtonText] = useState('List');
function handleClick() {
    setButtonText(prevText => prevText === 'List' ? 'Grid' : 'List');
};

核心逻辑就是每次点击按钮时，判断当前文本是List还是Grid，将其设置为相反的文本，以此实现点击切换的效果。

内容的提问来源于stack exchange，提问作者Hisham