Question

我在使用react useState钩子时遇到麻烦。我正在尝试清除对话框关闭时的状态。但是总有一个属性不会更新。

按钮：

Create btn
<Button className={classes.dashboardPosts__newPost} onClick={handleClickOpen}>nuevo post</Button>
Edit btn
<TableCell className={classes.dashboardPosts__bodyCell}><CreateIcon onClick={(e) => { onClickEdit(e, post._id) }} /></TableCell>

----编辑----

Close btn
<Button className={classes.dashboardPosts__modalButtons} onClick={handleClose} color="primary">Cancelar</Button>

该按钮将打开一个包含文本字段的对话框：

<Button className={classes.dashboardPosts__modalButtons} type="submit" color="primary">{input._id ? "Editar" : "Crear"}</Button>

这是对话框打开和关闭的方式：

const handleClickOpen = () => {
  setOpen(true);
};

const handleClose = () => {
  setPreviewLink("")
  setFile("No se ha seleccionado ningún archivo")
  setInput({
      _id: "",
      p_title: "",
      p_body: "",
      p_mainImage: null,
      p_link: ""
  })
  setOpen(false);
};

这是状态：

const [input, setInput] = useState({
   _id: "",
   p_title: "",
   p_body: "",
   p_mainImage: null,
   p_link: ""
})

这是编辑按钮，单击：

const onClickEdit = (e, id) => {
   e.preventDefault()
   const p = postsList.filter((up) => {
       return up._id === id
   })
   setInput({
       ...input,
       p_body: p[0].p_body,
       p_title: p[0].p_title,
       _id: p[0]._id,
       p_mainImage: p[0].p_mainImage,
   })
   setPreviewLink(p[0].p_title.replace(titleRegex, '').split(" ").join("-").toLowerCase())
   setFile(p[0].p_mainImage.split("").splice(0, 40).join("") + "...")
   handleClickOpen(e)
 }

预期的功能是，当我单击编辑btn时，模式将打开并显示帖子详细信息；当模式关闭时，请清洁input，因此，每当我单击新的帖子按钮时，表单都是干净的。但是，只有当我使用新的post按钮打开模态然后关闭它时，表单才会变得干净，而当我使用edit按钮打开它时，表单才变得干净。除p_title属性外，所有内容都将清除。

---编辑---

问题出在我的input onChange函数中，就是这样：

const onInputChange = (e, name, data = "") => {
        e.preventDefault()
        setInput({ ...input, [name]: data !== "" ? data : e.target.value })
        if (name === "p_title") setPreviewLink(e.target.value.replace(titleRegex, '').split(" ").join("-").toLowerCase())
        if (name === "p_approved") {
            setInput({ ...input, [name]: !input.p_approved })
            return
        }
    }

但是我不知道如何解决。我的猜测是，当编辑器（CKeditor）输入更改时，会将p_title设置为其原始值。

Answer 1

我设法解决了。发生的事情是，每当我更新input状态时，ckeditor组件都会检测到更改，因此它将input状态更改为我在关闭对话框之前设置的状态。

解决方案是创建一个不同的函数来更新ckeditor状态，因此当ckeditor更新时整个状态不会改变。

这是更新ckeditor状态的新功能

const onEditorChange = (e, editor) => {
    setCkeditor(editor.getData())
}

反应-useState属性未更新

1 个答案: