为什么这个按钮需要点击2次才能在ReactJS中恢复状态

Question

我想在按下和不按下之间来回点击按钮。但按下时，需要单击2次才能恢复为未按下。

const [priority, setPriority] = useState('');
var isPriority = 0;
function swapPriority() {
if (isPriority === 0) {
setPriority("btn__danger");
isPriority = 1;
} else {
setPriority("");
isPriority = 0;
}
}
const template = {
<button
type="button"
className={'btn ' + priority}
onClick={swapPriority}
>
}

Answer 1

在您的代码中，基本上当您第一次单击时，您将优先级设置为"btn_危险"；并且isPriority为0。但是isPriority是一个普通变量，因此当代码重新渲染时，它会再次将isPriority设置为0(尽管您之前将其设置为1，因为普通变量的值在渲染之间不会持久存在(。现在，当您再次单击时，if条件为true(因为isPriority为0(，因此它执行setPriority((。但由于，setPriority((内的值没有变化，因此不会发生重新渲染，并且isPriority设置为1。再次单击按钮时，由于isPriority现在为1，它的行为与您预期的一样。正如上面@M-Raw所建议的那样，这不是处理这件事的正确方法。(但这是一个很好的方式来理解react是如何无障碍工作的。(

Answer 2

您正在定义priority并更改isPriority反应方式是这样的：

const [priority, setPriority] = useState(false);
function swapPriority() {
setPriority(!priority);
}
const template = {
<button
type="button"
className={priority ? 'btn btn__danger' : 'btn '}
onClick={swapPriority}
>{priority ? 'danger' : 'not-danger'}</button>
}