reactjs - react-ace + flexlayout-react：Ace 编辑器不断重置

Question

我有一个FlexLayout（来自flexlayout-react），其中包含一个AceEditor（来自react-ace）。为了测试，我还添加了一个Test组件。

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

import FlexLayout from 'flexlayout-react';
import AceEditor from 'react-ace';

// display an Ace editor (here with fixed size)
const Editor = () => {
  return (
    <AceEditor
      width="200px"
      height="200px"
      value="foo"
    />
  );
}

// an increment button, just something simple stateful
const Test = () => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <button onClick={() => setCount(count + 1)}>
        {count}
      </button>
    </div>
  );
};

// two columns for editor and test component
const model = FlexLayout.Model.fromJson({
  global: {},
  borders: [],
  layout: {
    type: 'row',
    weight: 50,
    children: [
      {
        type: 'tabset',
        weight: 50,
        selected: 0,
        children: [
          {
            type: 'tab',
            name: 'A',
            component: 'editor',
          },
        ],
      },
      {
        type: 'tabset',
        weight: 50,
        selected: 0,
        children: [
          {
            type: 'tab',
            name: 'B',
            component: 'test',
          },
        ],
      },
    ],
  },
});

const factory = node => {
  switch (node.getComponent()) {
    case 'editor': {
      return <Editor />;
    }
    case 'test': {
      return <Test />;
    }
    default:
      return null;
  }
}

// display the flex layout
const Ide = () => {
  return (
    <FlexLayout.Layout
      model={model}
      factory={factory}
    />
  );
};

// render everything
ReactDOM.render(
  <Ide />,
  document.getElementById('react-container')
);

发生什么了？

每当FlexLayout状态更改（焦点更改、拖动分隔线、更改宽度）时，Ace 编辑器的文本都会重置为foo. 相反，Test保留 的值。没有FlexLayout，问题就消失了。

所以这两个组件之间似乎存在一种奇怪的交互，但我对 React 太缺乏经验，无法弄清楚。我将如何调试这个？解决此类问题的常见途径是什么？或者在这种特定情况下出现错误的任何具体想法？

标签： reactjsace-editor