记录使用LogicFlow遇到的bug

我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第2篇文章，点击查看活动详情

第一步：使用 npx create-react-app antd-demo 创建一个 react 应用

第二步：安装logicflow

npm install @logicflow/core
npm install @logicflow/extension

第三步：绘制流程图，复制官网代码

// App.js
import { useEffect } from "react"
import LogicFlow from '@logicflow/core';
import "@logicflow/core/dist/style/index.css";
import { DndPanel, SelectionSelect } from '@logicflow/extension';
import '@logicflow/extension/lib/style/index.css'
import './App.css';
console.log(LogicFlow)
function App() {
  useEffect(() => {
    LogicFlow.use(DndPanel);
    LogicFlow.use(SelectionSelect);
    const lf = new LogicFlow({
      container: document.querySelector('#graph'),
      width: 1000,
      height: 800,
      grid: true
    });

    lf.extension.dndPanel.setPatternItems([
      {
        label: '选区',
        icon: ,
        callback: () => {
          lf.extension.selectionSelect.openSelectionSelect();
          lf.once('selection:selected', () => {
            lf.extension.selectionSelect.closeSelectionSelect();
          });
        }
      },
      {
        type: 'circle',
        text: '开始',
        label: '开始节点',
      },
      {
        type: 'rect',
        label: '用户任务',
        className: 'important-node'
      },
      {
        type: 'rect',
        label: '系统任务',
        className: 'import_icon'
      },
      {
        type: 'diamond',
        label: '条件判断',
      },
      {
        type: 'circle',
        text: '结束',
        label: '结束节点',
      }
    ]);
    lf.render()
  }, [])
  return (
    <div className="App">
      <div id="graph"></div>
    </div>
  );
}

export default App;

此时你在浏览器操作，会发现无法拖动节点绘制流程图 此时你打印useEffect内部，发现useEffect渲染了两次

查阅发现是react18将useEffect的默认运行改为了两次 这个更改只有在开发模式才会发生，且只在只在 strict mode 发生

解决办法：删除index.js里面的React.StrictMode

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
// 变更为
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

此时节点拖动正常