Reactjs 显示重复图像-使用效果问题？

我有一些代码显示我的板，如下所示：

 <Grid item xs={6} justify="center">
    <Paper id="board">
    </Paper>
 </Grid>

你知道为什么它会显示两次，但只是有时吗？如果有帮助的话，当我点击浏览器刷新按钮时，它总是删除重复的电路板。但是，当我第一次保存代码时，它经常在那里。

您需要从生效状态返回，因此当快速刷新将重新运行它时，将不会有重复。它有时工作正常，因为有时快速刷新有时不尝试保留状态，并将所有内容呈现为新的。这取决于您所做的更改，所以当您更改一个文件时，它将呈现为干净，但在另一个文件上，它将尝试保留状态，并仅重新运行效果（这是添加第二块板的地方）

---

另外，最好不要直接与DOM交互，而是使用它。这是在react中使用DOM的更好方法，因为react的主要目的是更新DOM。

在

useRef

中保存Gameboard实例，这样只创建一个实例：

const board = useRef(); 

useEffect(() => {
    if(!board.current) {
      board.current = new Gameboard(document.getElementById('board'), {
        // position: 'r4r1k/p1P1qppp/1p6/8/5B2/2Q1P3/P4PPP/R3KB1R b KQ - 0 21',
        position: game.fen(),
        sprite: {
          url: './gameboard-sprite.svg', // pieces and markers are stored as svg in the sprite
          grid: 40, // the sprite is tiled with one piece every 40px
          cache: true,
        },
        orientation: COLOR.white,
        moveInputMode: MOVE_INPUT_MODE.dragPiece,
        responsive: true,
      });
      board.current.enableMoveInput(inputHandler);
    }
 }, []);

---

我收到一个错误，说“Const声明需要一个初始化值。它在这里突出显示了board和current之间的点：

Const board.current=

您在哪里使用Const board.current=？？应该是Const board=useRef（）。并更新它value board.current=一些值抱歉，我不是很清楚。我在这行代码中得到错误：

const board.current=新游戏板（document.getElementById（'board'），{

它指向电路板和电流之间的点。等等，我刚刚注意到一些东西。你删除了该行开头的常量，我没有看到。我现在无法获得复制，所以我认为它已经解决了！这是一个很大的麻烦，现在它已经消失了！谢谢。：）你的欢迎；）

const board = useRef(); 

useEffect(() => {
    if(!board.current) {
      board.current = new Gameboard(document.getElementById('board'), {
        // position: 'r4r1k/p1P1qppp/1p6/8/5B2/2Q1P3/P4PPP/R3KB1R b KQ - 0 21',
        position: game.fen(),
        sprite: {
          url: './gameboard-sprite.svg', // pieces and markers are stored as svg in the sprite
          grid: 40, // the sprite is tiled with one piece every 40px
          cache: true,
        },
        orientation: COLOR.white,
        moveInputMode: MOVE_INPUT_MODE.dragPiece,
        responsive: true,
      });
      board.current.enableMoveInput(inputHandler);
    }
 }, []);