Closed a1ooha closed 3 years ago
import CodeMirror from "@uiw/react-codemirror";
import React, { useMemo, useState, useRef } from "react";
import "./styles.css";
const codes = [
{ name: "file1", code: "content1" },
{ name: "file2", code: "content2" },
{ name: "file3", code: "content3" }
];
export default function App() {
const [name, setName] = useState("file1");
const currentData = useRef();
const data = useMemo(() => codes.find((item) => item.name === name), [name]);
currentData.current = useMemo(
() => codes.find((item) => item.name === name),
[name]
);
return (
<div className="App">
<button onClick={() => setName("file1")}>file1</button>
<button onClick={() => setName("file2")}>file2</button>
<button onClick={() => setName("file3")}>file3</button>
<CodeMirror
value={data.code}
onChange={() => {
console.log(currentData.current);
}}
/>
</div>
);
}
https://codesandbox.io/s/react-codemirror-127-766b0?file=/src/App.js:0-934
@a1ooha 可以先通过此方案解决问题。
@a1ooha Upgrade + @uiw/react-codemirror@3.0.13
onChange 回调更新后,codemirror 永远调用的都是第一次传入的。
demo: https://codesandbox.io/s/great-shirley-jj7l7?file=/src/App.js