反應 useEffect 鈎子切換問題

Question

我對 useEffect 在 React 中的工作方式感到困惑。 以下代碼有效，但與預期的方式相反。 選中復選框后不會出現背景圖片，而是在未選中復選框時出現，並在選中時消失。

function Beautifier() {
  const [isBeautiful, setIsBeautiful] = React.useState(false);

  React.useEffect(
    function toggleBackground(shouldShow) {
      document.body.classList.toggle('with-bg', shouldShow);
    }
  );
  
function handleChange() {
  setIsBeautiful(!isBeautiful);
} 

  return (
    <label>
      <input type="checkbox" onChange={handleChange} />
      Turn on pretty background
    </label>
  );
}

ReactDOM.render((
  <Beautifier />
), document.querySelector('#root'));

我很確定我的問題是我在 useEffect 掛鈎中缺少 return() =>，但是我能想到的所有事情都沒有解決問題/或破壞了 function。 不添加 CSS，因為該部分工作正常。

Answer 1

我似乎已經兩次聲明toggleBackground並且沒有調用它。 您還缺少useEffect上的依賴項數組。 我假設您打算在useEffect回調中實際調用toggleBackground 。 使用isBeautiful state 作為依賴項，並將其傳遞給toggleBackground function。

React.useEffect(() => {
  toggleBackground(isBeautiful);
}, [isBeautiful]);

您還應該使用功能性 state 更新來切換isBeautiful state。

function handleChange() {
  setIsBeautiful(isBeautiful => !isBeautiful);
}