带布尔值的 useState

Posted 2023-02-22

【中文标题】带布尔值的 useState

【英文标题】：useState with a boolean

【发布时间】：2020-03-16 14:52:53

【问题描述】：

我有一个 react next.js 项目和一个表单。我想在我的表单中使用滑块。顺便说一句，我使用语义 ui 反应。我有一个带有以下输入的 useState 钩子：

function CreateTicket() 
  const [ticket, setTicket] = useState(
    name: "",
    description: "",
    media: "",
    priority: false
  );
....

还有一个handleChange、handleSubmit 和一个handleToggle 函数。当我在 console.log 中提交表单时，它不会将优先级的值设置回 false。

      <Checkbox
        style= padding: "1rem" 
        label="Important?"
        name="priority"
        toggle
        onChange=handleToggle
      />

  const handleToggle = event => 
    let  priority  = event.target;
    setTicket(prevState => ( ...prevState, priority: !priority ));
  ;

console.log ->

页面刷新后：

name: "", description: "", media: "", priority: false

之后：切换

name: "", description: "", media: "", priority: true

第二次切换后

name: "", description: "", media: "", priority: true

我做错了什么？

【问题讨论】：

event.target 没有属性 priority 据我所知，!undefined 是 true。

【参考方案1】：

您需要从prevState 解构priority，而不是event.target：

const handleToggle = event => 
  setTicket(( priority, ...prevState ) =>
    ( ...prevState, priority: !priority )
  );
;

作为一种优化，您可以将handleToggle 与useCallback() 一起记忆，这样<Checkbox/> 就不需要在每次状态更新时重新渲染：

const handleToggle = useCallback(event => 
  setTicket(( priority, ...prevState ) =>
    ( ...prevState, priority: !priority )
  );
, [setTicket]);