codemirror 在多个 tab A下的 sql 提示切换到 tab B 还是会存在

Question

在 react 项目中使用 codemirror 来创建一个 sql 编辑器

样式如下：左侧每个 tab 对应一个 sql 编辑器

代码如下：

import { Controlled  as  CodeMirror } from  'react-codemirror2'
import  'codemirror/mode/sql/sql'
import  'codemirror/addon/hint/show-hint'
import  'codemirror/addon/hint/sql-hint'

render() {
    const { id, sql, queryName, isSaveMadalShow, queryId, isRunning } =  this.state
    const { queryTab, dataSourceId, dbName } =  this.props
    const { tableList = [], dataBaseList, tables } =  queryTab
    const  dataBaseNames = dataBaseList.map(item => ({[`FROM ${item.label}.`]: []}))
    const  tableNames =  tables.map(item => ({[`FROM ${item.label}`]: []}))
    
  <CodeMirror
    ref={(cm) => {this.codeMirror = cm}}
    value={sql}
    options={{
    mode: { name:  'text/x-mysql' },
    theme:  'monokai',
    indentWithTabs:  true,
    smartIndent:  false, // 自动缩进
    readOnly:  false,
    lineNumbers:  true, // 显示行号
    lineWrapping:  'wrap', // 长行时文字是 wrap（换行）
    matchBrackets:  true,  // 括号匹配
    extraKeys: {
        Tab:  'autocomplete', // 按 Tab 出现联想
    },
    hint:  CodeMirrorHintSQL,
    hintOptions: {
        completeSingle:  false,
        tables:  Object.assign({}, ...tableNames, ...dataBaseNames)
      }
    }}
    onBeforeChange={(editor, data, value) => {
        this.setState({
            sql:  value,
        })
    }}
    onChange={throttle(this.autoSaveQuery, 2000)}
    onCursorActivity={(editor) => {
        // 调用显示提示
        // console.log('cursor activity')
        editor.showHint()
    }}
  />
}

切换 tab 时， tabA 的 sql 提示切换到 tabB 时还是会存在，如图就是从 query 4 切换到 irene test 2 的过程，可以看到存在 query 4 的 sql 提示（SELECT），请问这是什么原因？该如何改呢？