React 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() =>，但我能想到的所有事情都没有解决 issue/or功能。不添加 CSS，因为那部分工作正常。

Answer 1

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

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

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

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

React useEffect 钩子切换问题

React useEffect hook toggle issue

javascript

reactjs

react-hooks

use-effect