useState与布尔值

debugcn 发表于 Dev

用户名

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

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

以及handleChange，handleSubmit和handleToggle函数。当我在console.log中提交表单时，不要将priority的值设置回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}

我怎么了

帕特里克·罗伯茨

您需要priority从进行销毁prevState，而不是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]);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。