Значение CodeMirror не обновляется при изменении реквизитов в функциональном компоненте React

Question

Я попытался обновить значение моего Компонента CodeMirror (импортированного из response-codemirror), используя полученные реквизиты, но значение не меняется, даже если реквизиты изменились. И поскольку я загружаю из API, используя corsanywhere, чтобы преодолеть ограничения CORS, иногда запрос на выборку завершается неудачно. Однако при успешном получении значение все равно не обновляется.

Вот скриншот моей попытки:

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} />;
}

Вот вывод консоли из двух операторов журнала, когда я ввел «hello world» во ввод, который доказывает, что реквизиты обновлены:

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

См. Мой ответ ниже для решения

Answer 1

Я решил проблему, заменив компонент CodeMirror обычной текстовой областью, которая соответственно обновляет свое значение. Тем не менее, я все равно был бы признателен, если бы кто-то объяснил причины проблемы обновления значения CodeMirror. Я ищу единый внешний вид и стиль для моего редактора кода и консоли, поэтому использование CodeMirror для консоли все еще очень желательно.

Обновление

Проблема на самом деле в программе response-codemirror. Я могу использовать зеркальное отражение кода в реакции снова, используя более новый и хорошо поддерживаемый response-codemirror2 . Подробнее об этом GitHub .