在React功能组件中更改道具时，CodeMirror值未更新

Question

I tried to update the value of my CodeMirror Component (imported from react-codemirror) using props received but the value doesn't change even though the props changed. And because I'm loading from an API using corsanywhere to overcome CORS restrictions, sometimes the fetch request fails. However, when fetch succeeded, the value is still not updated.

Here's a screenshot of my attempt:

function CodeConsole(props) {
  console.log("CodeConsole props: ", props);
  const options = {
    readOnly: true
  };
  const stdout = props.output.stdout;
  console.log("stdout: " + stdout);
  return <Codemirror value={stdout} options={options} autoFocus={false} />;
}

Here's the console output from the two log statements when I typed "hello world" into the input which proves that the props are updated:

CodeConsole props:  {output: {stdout: "hello world↵", stderr: "", error: ""}}
stdout: we

See my answer below for the solution

Answer 1

I solved the problem by replace CodeMirror component with a regular textarea which updates its value accordingly. However, I would still appreciate someone explain the reasons behind CodeMirror value's update issue. I'm looking for a consistent look and style for my code editor and console so using CodeMirror for the console is still very desirable.

Update

The problem is actually in the react-codemirror program. I'm able to use code mirror in react again using a newer and well-maintained react-codemirror2 . See this GitHub issue for more details.