reactjs - SunEditor onChange 事件中的状态未更新

Question

版本

• 下一个：12.0.7
• 太阳编辑器：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'sonChange事件中设置其他状态，但我不能。谁能向我解释如何解决这个问题？

Answer 1

您可以使用函数内部的setToggle函数来获取当前状态值并返回该状态变量的修改值。

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

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