无法从函数打印字符串（在 React tictactoe 教程中）

Question

完成 tictactoe React 教程后，我正在尝试实施第一个改进：Display the location for each move in the format (col, row) in the move history list.

但是我的 (col,row) 尽管计算正确，但并未打印在按钮中。我的按钮得到像 Go to move #1 (undefined) 这样的文本。应该打印 (col,row) 值而不是未定义的值。

为什么会这样？

这是我的代码：

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

  const moves = history.map((step,move) => {
    const desc = move ? 'Go to move # ' + move + ' ('+getRowCol(history, move)+ ')': 'Go to game start';
    return (
      <li key={move}><button onClick={() => this.jumpTo(move)}>{desc}</button></li>
    )
  });

 (...)

 function getRowCol(history, move){
  let array1 = history[move].squares;
  let array2 = history[move-1].squares;
  array1.forEach((item,index) => {
   if(item !== array2[index]){
    return nomearIndice(index);
   } 
  });
 }
 function nomearIndice(indice){
  let retorno = indice < 3 ? '1,' : indice < 6 ? '2,' : '3,';
  if([0,3,6].includes(indice)){
   return retorno + '1';
  } if([1,4,7].includes(indice)){ 
   return retorno + '2';
  } if([2,5,8].includes(indice)){
   return retorno + '3';
  }
 }

所以我运行 history.map 在代码示例的第 6 行中，此方法调用 getRowCol 函数，据我所知，将一百万 console.logs 在代码中，它工作正常。我猜 JS 没有等到我的 getRowCol 函数 returns 并且正在产生这个不希望的结果。这是问题吗？如果是这样，我该如何解决？

提前致谢

Answer 1

您似乎没有从 getRowCol 返回任何内容尝试

function getRowCol(history, move) {
  let array1 = history[move].squares;
  let array2 = history[move - 1].squares;
  return array1.map((item, index) => {
    if (item !== array2[index]) {
      return nomearIndice(index);
    }
  });
}

Here是一个使用map并返回结果的demo。但是，我不确定您期望的输出是什么。

你能解释一下你想要从 getRowCol 得到什么结果吗（例如一个例子），我可以尽力提供帮助。

我已经更新了演示以反映您在使用后的行为

function getRowCol(history, move) {
  let array1 = history[move].squares;
  let array2 = history[move - 1].squares;

  return array1.reduce((accumulator, item, index) => {
    return (item === array2[index]) ? accumulator : nomearIndice(index);
  }, '');
}

无法从函数打印字符串（在 React tictactoe 教程中）

Can't print String from function (in react tictactoe tutorial)

javascript

tic-tac-toe

reactjs