反应 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() =>，但是我能想到的所有事情都没有解决问题/或破坏了函数。不添加 CSS，因为该部分工作正常。

Answer 1

您似乎已经声明了两次 toggleBackground 并且没有调用它。您还缺少useEffect 上的依赖项数组。我假设您打算在useEffect 回调中实际调用toggleBackground。使用isBeautiful 状态作为依赖，并将其传递给toggleBackground 函数。

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

您还应该使用功能状态更新来切换isBeautiful 状态。

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