Javascript React教程：TicTacToe，使用map（）

我正在尝试使用

.map（）

方法渲染React教程中TictoE示例中的一行

我希望看到四排三个盒子。但我只看到三排

render（）{
常量状态='下一个玩家：X'；
常数rc=[0,1,2]；
const rowItems=rc.map（（n）=>{
控制台日志（n）；
这是renderSquare（n）；
});
返回(
{状态}
//我希望下面的一行渲染第一行，
//在手动渲染的三个
{this.rowItems}

编辑：

两个问题：

• map

  需要返回它返回的每个值

• 它只是

  rowItems

  ，而不是

  this.rowItems

  ，因为它只是上面定义的一个变量（不是在实际类上定义的方法）

{rowItems}

---

注意：这将返回一个警告：

它只希望您向正在循环的节点添加一个

键

属性

renderSquare(i) {
    return <Square key={i} value={i} />;
}

window.addEventListener（'mousedown'，函数（e）{
document.body.classList.add（'mouse-navigation'）；
document.body.classList.remove（'kbd-navigation'）；
});
window.addEventListener（'keydown'，函数（e）{
如果（如keyCode===9）{
document.body.classList.add（'kbd-navigation'）；
document.body.classList.remove（'mouse-navigation'）；
}
});
window.addEventListener（'click'，函数（e）{
如果（e.target.tagName=='A'&&e.target.getAttribute（'href'）=='#'）{
e、 预防默认值（）；
}
});
window.onerror=函数（消息、源、行、列、错误）{
var text=error？error.stack | | error:message+'（在“+source+”：“+line+”：“+col+”）；
errors.textContent+=text+'\n'；
errors.style.display=''；
};
console.error=（函数（旧）{
返回函数错误（）{
errors.textContent+=Array.prototype.slice.call（arguments.join）（“”）+'\n'；
errors.style.display=''；
应用（这个，论点）；
}
})（控制台错误）；

为什么需要4行？@MoritzRoessler:因为3行是在没有

map（）的情况下手动渲染的

@ShubhamKhatri:因为OP中的最后一行代码。我对它进行了编辑，以使其更加清晰。是的，但这就是您所做的一切！在代码笔中，您不渲染

这个。行项目

也不返回

这个
const rowItems = rc.map((n) => {
    console.log(n);
    return this.renderSquare(n);
});
// const rowItems = rc.map((n) => this.renderSquare(n)); /* with arrow functions */

renderSquare(i) {
    return <Square key={i} value={i} />;
}