无法使用 React 钩子切换状态

Question

我不得不将 class 重写为 JS/React 中的一个函数，但我在让钩子在函数中工作时遇到了一些麻烦。

function Switch(props) {
  const [isActive, setIsActive] = React.useState();
  
  function handleClick() {
    setIsActive(!isActive);
  }
 
  const className = `switch ${props.color} ${props.isActive ? 'on' : 'off'}`;

   return (
      <div className={className}>
        <button className="img" onClick={handleClick} />
        <h3>{props.title}</h3>
      </div>
    );
}

ReactDOM.render((
  <Switch title="Happiness" color="blue" isActive={false} />
), document.querySelector('#root'));

我尝试更改 handleClick 函数（以及其中的 setIsActive），但我无法让它工作。在此先感谢您的帮助！

注意：没有添加 CSS，因为那部分工作正常。

Answer 1

您正在从道具而不是状态中获取 isActive。为了让这个工作你需要改变

const [isActive, setIsActive] = React.useState();

至

const [isActive, setIsActive] = React.useState(props.isActive);

和

const className = `switch ${props.color} ${props.isActive ? 'on' : 'off'}`;

至

const className = `switch ${props.color} ${isActive ? 'on' : 'off'}`;

此外，如果您想从外部应用道具更改，则需要添加一个 useEffect 挂钩

useEffect(() => {
  setIsActive(props.isActive)
}, [props.isActive])

Answer 2

您正在尝试更改组件通过子组件中的状态接收的道具。道具是（应该）不可变的。如果你想改变组件的行为，

复制state变量中的props

const [isActive, setIsActive] = React.useState(props.isActive);
使用状态更新的函数形式。在新状态依赖于先前状态的情况下更重要

function handleClick() { setIsActive(prevState=>!prevState.isActive); }
更新对状态变量的引用而不是接收到的 prop 值

const className = 切换 ${props.color} ${isActive ？ 'on' : 'off'};

Answer 3

您还需要查看组件状态isActive。你可以逻辑或者它与你的道具 isActive（这里仅作为默认值）：

  const className = `switch ${props.color} ${
    props.isActive || isActive ? "on" : "off"
  }`;

无法使用 React 钩子切换状态

Unable to toggle state with React hook

javascript

boolean

reactjs