Reactjs 反应ace+；flexlayout react:Ace编辑器不断重置

我有一个

FlexLayout

（from），其中包含一个

aceditor

（from）。对于测试，我还添加了一个

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')
);

import React，{useState}来自“React”；
从“react dom”导入react dom；
从“FlexLayout react”导入FlexLayout；
从“react ace”导入AceEditor；
//显示Ace编辑器（此处为固定大小）
常量编辑器=（）=>{
返回(
);
}
//一个增量按钮，只是一个简单的有状态按钮
常数测试=（）=>{
const[count，setCount]=useState（0）；
返回(
设置计数（计数+1）}>
{count}
);
};
//编辑器和测试组件的两列
const model=FlexLayout.model.fromJson({
全局：{}，
边界：[]，
布局：{
键入：“行”，
体重：50，
儿童：[
{
键入：“tabset”，
体重：50，
已选择：0，
儿童：[
{
键入：“制表符”，
名称：‘A’，
组件：“编辑器”，
},
],
},
{
键入：“tabset”，
体重：50，
已选择：0，
儿童：[
{
键入：“制表符”，
名称：‘B’，
组件：'测试'，
},
],
},
],
},
});
常量工厂=节点=>{
开关（node.getComponent（））{
案例“编辑”：{
返回；
}
案例“测试”：{
返回；
}
违约：
返回null；
}
}
//显示flex布局
常量Ide=（）=>{
返回(
);
};
//渲染一切
ReactDOM.render(
,
document.getElementById（'react-container'））
);

发生了什么事

每当

FlexLayout

状态改变时（焦点改变、拖动分隔符、改变宽度），Ace编辑器的文本将重置为

foo

。相反，

Test

的值被保留。如果没有

FlexLayout

，问题就会消失

因此，这两个组件之间似乎有一种奇怪的相互作用，但我对React太缺乏经验，无法理解。我将如何调试这个？对于这样一个问题，有哪些共同的解决途径？或者，在这种特定情况下，错误在哪里，有什么具体的想法