Question

正在react.js tic-tac-toe tutorial上尝试将行，列信息添加到游戏动作列表中。我添加了一种确定当前移动的行和列的方法，以便可以在先前移动的列表中输出类似Go to move #1 (row#,col#)的内容。该方法返回我要在<li><button>{desc}中使用的字符串值。

但是，当我在游戏板上的每次单击时调用该方法时，不仅更新了当前的<li><button>，而且<li>元素的 all 也更新了最多最近的row, col信息。我以为可以通过在<li>键属性中添加行col来解决此问题，但是仍然会发生。我想念什么？谢谢

Codepen：https://codepen.io/anon/pen/qMVemJ

render() {
const history = this.state.history;
const current = history[this.state.stepNumber];
const winner = calculateWinner(current.squares);

const moves = history.map((step, move) => {
  let rowCol = this.setRowCol(); // returns row, col string for step
  const desc = move ?
    'Go to move #' + move + rowCol:
    'Go to game start';
  return (
    <li key={move + rowCol}>
      <button onClick={() => this.jumpTo(move)}>{desc}
      </button>
    </li>
  );
});
// [...omitted code that sets the status variable...]
return (
  <div className="game">
    <div className="game-board">
      <Board
        squares={current.squares}
        onClick={(i) => this.handleClick(i)}
      />

    </div>
    <div className="game-info">
      <div>{status}</div>
      <ol>{moves}</ol>
    </div>
  </div>
);

Answer 1

一个简单的解决方案是记住在历史记录中单击了哪个正方形，以及正方形键。然后使用该索引来检索单击了哪个行和列。

这是一个有效的示例：https://codepen.io/anon/pen/LJOodG?editors=0010

setRowCol仅评估呈现按钮列表的历史记录的最后2个步骤，并应评估该步骤时播放的内容。 setRowCol应该考虑当前评估的按钮。我更新了您的代码以匹配此行为：codepen.io/anon/pen/RYjXMb?editors=0010#0

react.js井字游戏-为什么具有唯一键的<li>不能不变

1 个答案: