React - useState 属性未更新

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)
 }

预期的功能是，当我单击编辑按钮时，模态打开时会显示 post 详细信息，当模态关闭时，清理 input 所以每当我单击新 post 按钮窗体是干净的。但是，只有当我使用新的 post 按钮打开模式然后关闭它时，表单才会变得干净，而不是当我使用编辑按钮打开它时。除了 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())
}

React - useState 属性未更新

React - useState property not updating

javascript

reactjs

react-hooks

use-state

React - useState 属性 未更新

React - useState property not updating

javascript

reactjs

react-hooks

use-state

React - useState 属性未更新