使用布尔值的 useState

Question

我有一个 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}

我错了什么？

Answer 1

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

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

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

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

使用布尔值的 useState

useState with a boolean

reactjs

next.js

react-hooks