javascript - react-rte 给出 TypeError : r. getEditorState is not a function in next js

Question

我有一个 nextjs 项目，它有一个 react-rte 组件
react-rte 组件显示正确，但是当我转到其他组件并单击浏览器后退按钮时，我收到以下错误:Unhandled Runtime Error TypeError: r.getEditorState is not a function当我注释掉 react-rte 组件时，错误不再发生
react-rte 组件

import React, { useState, useEffect } from "react";
import dynamic from "next/dynamic";
import PropTypes from "prop-types";
//import the component
const RichTextEditor = dynamic(() => import("react-rte"), { ssr: false });

const MyStatefulEditor = ({ onChange }) => {
  const [value, setValue] = useState([]);
  console.log(value.toString("html"));

  useEffect(() => {
    const importModule = async () => {
      //import module on the client-side to get `createEmptyValue` instead of a component
      const module = await import("react-rte");
      console.log(module);
      setValue(module.createEmptyValue());
    };
    importModule();
  }, []);

  const handleOnChange = (value) => {
    setValue(value);
    if (onChange) {
      onChange(value.toString("html"));
    }
  };

  return <RichTextEditor value={value} onChange={handleOnChange} />;
};

MyStatefulEditor.propTypes = {
  onChange: PropTypes.func,
};

export default MyStatefulEditor;

Answer 1

尝试这个

import React, { useState, useEffect } from "react";
import dynamic from "next/dynamic";
import PropTypes from "prop-types";

const RichTextEditor = dynamic(() => import("react-rte"), { ssr: false });


const MyStatefulEditor = ({ onChange }) => {
  const [value, setValue] = useState([]);
  
  useEffect(() => {
    // set the state value using the package available method
    setValue(RichTextEditor.createEmptyValue())
  }, []);

  const handleOnChange = (value) => {
    setValue(value);
    if (onChange) {
      onChange(value.toString("html"));
    }
  };

  return <RichTextEditor value={value} onChange={handleOnChange} />;
};

MyStatefulEditor.propTypes = {
  onChange: PropTypes.func,
};

export default MyStatefulEditor;

就像我在之前的评论中提到的那样，我注意到您正在导入 react-rte包两次。
在 useEffect Hook 您执行导入以初始化 value状态，通过查看找到的示例代码 here
您可以使用 RichTextEditor.createEmptyValue() 来实现。它来自已经导入的包。
您会注意到我更改了导入，不是动态的，尝试一下，如果它有效，那么如果这是您需要的，请尝试进行动态导入。