Javascript 反应教程：状态不工作

我在做这个，一开始就有问题

每个方块都应该显示它的state.value，并有一个onClick方法将状态设置为“X”。GUI应该在单击时更新，但它不是。。。我无法识别代码中的错误，可以吗

class Square extends React.Component {
  constructor() {
    super();
    this.state = {value: null};
  }
  setState(s) {this.state = s;}
  render() {
    return (
      <button className="square" onClick={() => this.setState({value:'X'})}>
        {this.state.value}
      </button>
    );
  }
}

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i}/>;
  }
  render() {
    const status = 'Next player: X';
    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 {
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
  }
}

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

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

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

类Square扩展了React.Component{
构造函数（）{
超级（）；
this.state={value:null}；
}
设置状态{this.state=s；}
render（）{
返回(
this.setState（{value:'X'}）}>
{this.state.value}
);
}
}
类板扩展React.Component{
renderSquare（一）{
返回；
}
render（）{
常量状态='下一个玩家：X'；
返回(
{状态}
{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{
render（）{
返回(
{/*状态*/}
{/*TODO*/}
);
}
}
// ========================================
ReactDOM.render(
,
document.getElementById（'容器'）
);
函数计算器（平方）{
常量行=[
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6],
];
for（设i=0；i

删除render（）方法上方的行，即您的setState（）定义。您不必创建此方法，它已经为您创建。

setState

是由反应库本身提供的内部方法。您不需要在代码中重写它

类Square扩展了React.Component{
构造函数（）{
超级（）；
this.state={value:null}；
}
render（）{
报税表（
this.setState（{value:'X'}）}>
{this.state.value}
);
}
}
类板扩展React.Component{
renderSquare（一）{
返回；
}
render（）{
常量状态='下一个玩家：X'；
返回(
{状态}
{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{
render（）{
返回(
{/*状态*/}
{/*TODO*/}
);
}
}
// ========================================
ReactDOM.render(
,
document.getElementById（'容器'）
);
函数计算器（平方）{
常量行=[
[0, 1, 2],
[3, 4, 5],
[6, 7, 8],
[0, 3, 6],
[1, 4, 7],
[2, 5, 8],
[0, 4, 8],
[2, 4, 6],
];
for（设i=0；i

为什么要覆盖状态本身。您应该更新状态内部的属性。试试

this.setState（{value:s}）

。这不是一条评论吗？谢谢，我不知道。因此，

state

属性上的getter和setter会自动设置。这是否适用于

状态

以外的其他属性？这是React的一个功能还是仅仅是本机ES6？@Rajesh当它是问题的解决方案时，为什么它应该是一个注释？@olefrank否，它只适用于

状态

变量。调用

setState

React时，React知道应该重新渲染组件。看看这个，我遇到了类似的问题

setState

可以被覆盖。但问题是OP正在取代它自己的状态。因此，当某些内容发生更改时，react无法检测到更改，因为整个引用都被替换了。