Javascript React教程-DOM更新但不显示在浏览器中？

我遵循的是来自的官方React教程，我遇到了这个bug，在这里我可以看到DOM正在我的浏览器检查器中更新，但是这个更改没有反映在实际页面中

我已经尝试在更多的地方使用

forceUpdate

并调用

setState

，但这些都没有改变行为，因为DOM似乎正在按预期正确更新

如果我通过inspector手动编辑DOM，也就是正确地绘制到页面

更令人费解的是，状态行每次单击都会持续更改，但单元格的行为非常奇怪——有时会随机出现或消失

您可以在此处看到问题的gif：

下面是相关代码（我的代码在结构上与教程略有不同）：

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
//道具：
//-值：要显示的单元格值
//-onClick：单击单元格时调用的委托
//
功能广场（道具）{
返回(
{props.value}
);
}
//道具：
//-player：当前播放机的字符串标识符
//-onClick：单击单元格时调用的委托
//
类板扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
正方形：数组（9）。填充（空），
//历史：[]
};
}
onSquareClicked（索引）{
const newSquares=this.state.squares.slice（）；
//仅当此方块为空时，才单击控制柄
如果（新闻栏[索引]==null）{
//this.state.history.push（{squares:this.state.squares}）；
新闻广场[索引]=this.props.player；
this.setState（{squares:newSquares}）；
//通知家长
this.props.onClick（）；
}
}
renderSquare（一）{
返回此.onsquarecicked（i）}/>；
}
render（）{
const status='Next player:'+this.props.player；
返回(
{状态}
{this.renderSquare（0）}
{this.renderSquare（1）}
{this.renderSquare（2）}
{this.renderSquare（3）}
{this.renderSquare（4）}
{this.renderSquare（5）}
{this.renderSquare（6）}
{this.renderSquare（7）}
{this.renderSquare（8）}
);
}
}
类游戏扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
currentPlayer:null
}
让isXFirst=（Math.floor（Math.random（）*2）==0）；
让startingPlayer=isXFirst？'X'：'O'；
this.state.currentPlayer=startingPlayer；
}
交换层（）{
设nextPlayer='X'；
如果（this.state.currentPlayer=='X'）{
下一层='O'
}
this.setState（{currentPlayer:nextPlayer}）；
}
handleClick（）{
这个.swapPlayer（）；
}
render（）{
返回(
this.handleClick（）}/>
{/*状态*/}
{/*TODO*/}
);
}
}
// ========================================
ReactDOM.render(
,
document.getElementById（'root'））
);

我正在使用

Firefox 80.0

-重新启动浏览器并没有改变这种行为，更新浏览器也没有帮助

如果你想让我尝试不同的方法来提供更多信息，请告诉我。在这一点上，我感到非常困惑

---

更新：然而，这在Safari上运行得很好……这让我相信这是Firefox或我机器上安装的Firefox的问题。当我有一些

无法复制此行为时，将更新更多信息。。。（这个链接不会存在太长时间）嗯，我没有Chrome，但我意识到我可以在Safari上试用——而且它在那里起作用了。这是更多的信息，但不是一个解决方案，因为如果没有Firefox/Chrome开发工具，使用Safari开发几乎是不可能的：（Safari有开发工具…是的，对不起-我的意思不是作为功能丰富的开发工具，我也不认为React devtools有Safarit的附加组件。很抱歉，它可以单独运行，因此您可以在运行Safari时使用。我无法复制此行为…（此链接不会存在太长时间）嗯，我没有Chrome浏览器，但我意识到我可以在Safari上试用它——它在那里发挥了作用。这是更多信息，但不是解决方案——因为如果没有Firefox/Chrome开发工具，使用Safari开发几乎是不可能的：（Safari有开发工具…是的，对不起-我的意思不是作为功能丰富的开发工具，我也不认为React devtools有Safarit的附加组件，很抱歉，它可以单独运行，所以您可以在运行Safari时使用。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

// props:
//    - value:   the cell value to display
//    - onClick: the delegate called when the cell is clicked
//
function Square(props) {
    return (
        <button className="square" onClick={props.onClick}>
            {props.value}
        </button>
    );
}

// props:
//    - player:  the string identifier of the current player
//    - onClick: the delegate called when the cell is clicked
//
class Board extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            squares: Array(9).fill(null),
            // history: []
        };
    }

    onSquareClicked(index) {
        const newSquares = this.state.squares.slice();

        // Only handle click if this square is empty
        if(newSquares[index] === null) {
            // this.state.history.push({squares: this.state.squares});

            newSquares[index] = this.props.player;
            this.setState({ squares: newSquares });

            // Notify parent
            this.props.onClick();
        }
    }

    renderSquare(i) {
        return <Square value={this.state.squares[i]}
                       onClick={() => this.onSquareClicked(i)} />;
    }

    render() {
        const status = 'Next player: ' + this.props.player;

        return (
          <div>
            <div className="status">{status}</div>
            <div className="board-row">
              {this.renderSquare(0)}
              {this.renderSquare(1)}
              {this.renderSquare(2)}
            </div>
            <div className="board-row">
              {this.renderSquare(3)}
              {this.renderSquare(4)}
              {this.renderSquare(5)}
            </div>
            <div className="board-row">
              {this.renderSquare(6)}
              {this.renderSquare(7)}
              {this.renderSquare(8)}
            </div>
          </div>
        );
    }
}

class Game extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            currentPlayer: null
        }

        let isXFirst = (Math.floor(Math.random() * 2) === 0);
        let startingPlayer = isXFirst ? 'X' : 'O';

        this.state.currentPlayer = startingPlayer;
    }

    swapPlayer() {
        let nextPlayer = 'X';
        if(this.state.currentPlayer === 'X') {
            nextPlayer = 'O'
        }

        this.setState({ currentPlayer: nextPlayer });
    }

    handleClick() {
        this.swapPlayer();
    }

    render() {
        return (
            <div className="game">
                <div className="game-board">
                    <Board player={this.state.currentPlayer} onClick={() => this.handleClick()}/>
                </div>
                <div className="game-info">
                    <div>{/* status */}</div>
                    <ol>{/* TODO */}</ol>
                </div>
            </div>
        );
    }
}

// ========================================

ReactDOM.render(
  <Game />,
  document.getElementById('root')
);