React 组件与 p5.js 画布重复

Question

我正在尝试使用单个 p5.js 草图创建一个 React 应用程序。 但是，包含 p5 草图的组件正在我的页面上复制。 不知道为什么会以这种方式呈现。

在这里你可以看到代码： https ://stackblitz.com/edit/react-ts-kocwqw?file=App.tsx,Sketch.tsx,index.tsx

以下是反应组件定义：

应用程序.tsx

import React = require('react');
import Sketch from './Sketch';

function App() {
  return (
    <div className="App">
      <Sketch />
    </div>
  );
}

export default App;

草图.tsx

import React = require('react');
import { useEffect } from 'react';
import p5 from 'p5';

const Sketch = () => {
  const p = (p5: any) => {
    let radius: number;
    p5.setup = () => {
      p5.createCanvas(p5.windowWidth / 2, p5.windowHeight / 2);
      p5.background(0);
      radius = 0;
    };

    p5.draw = () => {
      p5.ellipse(p5.width / 2, p5.height / 2, radius, radius);
      if (radius < 70) radius++;
    };
  };

  useEffect(() => {
    new p5(p);
  }, []);

  return <></>;
};

export default Sketch;

索引.tsx

import * as React from 'react';
import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';

import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

我在这里能错过什么？

Answer 1

解决方案是从index.tsx中删除<StrictMode> 。

从文档中，

严格模式不能自动为您检测副作用，但它可以通过使它们更具确定性来帮助您发现它们。 这是通过故意双重调用来完成的......

看起来严格模式是检测副作用的保障措施。