Как управлять изменением состояния в языковой опоре в React с помощью редактора Monaco? - PullRequest
Новая
       47

Как управлять изменением состояния в языковой опоре в React с помощью редактора Monaco?

0 голосов
/ 07 мая 2020

Я создаю онлайн-редактор на React с помощью Monaco Editor. Я использую (https://www.npmjs.com/package/@monaco-editor / response # get-value ), который является оболочкой редактора Monaco Editor для React, который можно использовать без настройки webpack. Я использую управляемый компонент, поскольку пользователи могут использовать редактор для написания собственного кода. Я сделал раскрывающийся список, чтобы выбрать языки из Javascript / Python в качестве параметров и передать то же самое в качестве опоры для языковой опоры в Монако. Я также использую три состояния - код, js, py для хранения значения кода в localStorage на случай, если пользователь обновит страницу или изменит язык. Проблема в том, что мое состояние смешивается при смене языка, и контент для js / py не сохраняется в редакторе, когда пользователь переключает язык и портит. Может ли кто-нибудь помочь, как справиться со сменой языка?

Мой компонент редактора выглядит так - 

        <ControlledEditor
            height="64vh"
            width="80vw"
            theme={theme}
            onChange={onChange}
            value={code}
            language={lang}
            editorDidMount={onLoad}
            options={{
              fontSize: fontSize,
              smoothScrolling: true,
              scrollbar: {
                vertical: "visible",
                horizontal: "visible",
                verticalScrollbarSize: 17,
                horizontalScrollbarSize: 17,
                verticalHasArrows: true,
                horizontalHasArrows: true,
              },
            }}
          />

Мое состояние выглядит так 

const [lang, setLang] = useState("javascript");
const [code, setCode] = useState(
    localStorage.getItem("myCode") || "//Write your Javascript code here!"
  );
const [js, setJs] = useState(
    localStorage.getItem("js") || "//Hey! Write your Javascript code here!"
  );
const [py, setPy] = useState(
    localStorage.getItem("py") || "#Write your Python code here!"
  );

My useEffect для code, js, py выглядит так - 

useEffect(() => {
    localStorage.setItem("myCode", code);
    localStorage.setItem("py", py);
    localStorage.setItem("js", js);
  }, [code, py, js]);

Мой onChange выглядит как - 

const onChange = (event, newValue) => {
    setCode(newValue);

    if (lang === "python") {
      setPy(newValue);
    } else if (lang === "javascript") {
      setJs(newValue);
    }
  };

Мой handleLanguageChange выглядит как - 

const handleLanguageChange = (e) => {
    setLang(e.target.value);
      if(e.target.value === "javascript" ){

        if(code !== js){
          setCode(js);
        }else{
          setCode("//type your javascript code here");
        }
      } else if (e.target.value === "python" ){

        if(code !== py){
          setCode(py);
        }else{
          setCode("#type your python code here");
        }
      }
  };
...