状态未在 SunEditor onChange 事件中更新

Question

版本

下一个：12.0.7
suneditor：2.41.3
suneditor-反应：3.3.1

const SunEditor = dynamic(() => import("suneditor-react"), {
  ssr: false,
});
import "suneditor/dist/css/suneditor.min.css"; // Import Sun Editor's CSS File

// states
const [toggle, setToggle] = useState<boolean>(false);
const [content, setContent] = useState<string>("");

useState(() => {
  console.log(toggle, content);
}, [toggle, content]);

// render
return (
  <SunEditor
    onChange={(content) => {
      setToggle(!toggle);
      setContent(!content);
    }
  />
);

当我键入控制台面板时，总是显示只有 content 发生了变化，但 toggle 没有发生变化。

我真的不知道会发生什么，我只想在 SunEditor 的 onChange 事件中设置其他状态，但我不能。任何人都可以向我解释如何解决这个问题吗？

Answer 1

您可以在 setToggle 函数中使用一个函数来获取当前状态值和 return 该状态变量的修改值。

<SunEditor
    onChange={(content) => {
        setToggle((value) => !value);
        setContent(content);
    }
/>

由于 setState 的异步性质，将函数而不是值传递给状态 setter 将为您提供获取组件状态的可靠方法。这是基于先前状态设置状态时的推荐方法。

状态未在 SunEditor onChange 事件中更新

State not updating in SunEditor onChange event

typescript

reactjs

next.js

suneditor

版本