javascript - react for 循环

Question

我正在学习 JavaScript/React。我正在尝试为 React 网站上的 tic-tac-toe 示例创建一个简单的 for 循环，但到目前为止它还存在问题。奇怪的是，有几个映射示例，但没有 for 循环示例。

无论如何，对于以下内容:

function Row(props){
  function renderSquare (i) {
    return <Square key={i} value={props.squares[i]} onClick={() => props.onClick(i)} />;
  }
  const columns = 3;
  let ss = [];
  for(var a = 0, i = props.counter * columns; a < 3; a++, i++){
    //Test Code
  }
  return (
    <div className="board-row">
      {ss}
    </div>
  );
}

当我替换“测试代码”时，这有效

ss.push(renderSquare(i));

但这失败了

ss.push(<Square key={i} value={props.squares[i]} onClick={() => props.onClick(i)}/>);

第二个选项失败，因为它没有创建“单独的”onClick 元素。如何使失败的示例正常工作？

---

更新#1

Sample

更新 #2 我按照 @Matthias247 的建议将 var 更改为 let，现在它可以工作了:D

function Row(props){
  function renderSquare (i) {
    return <Square key={i} value={props.squares[i]} onClick={() => props.onClick(i)} />;
  }
  const columns = 3;
  let ss = [];
  for(let a = 0, i = props.counter * columns; a < columns; a++, i++){
    ss.push(<Square key={i} value={props.squares[i]} onClick={() => props.onClick(i)}/>);
    //ss.push(renderSquare(i));
    //console.log(i);
  }
  return (
    <div className="board-row">
      {ss}
    </div>
  );
}

Answer 1

我认为问题在于您将 i 捕获到元素和 onClick 闭包中。您在 for 循环期间更改了 i，但最终对于所有插入的元素都是相同的 -> props.counter + 3。

要修复此问题，您需要为每个元素创建所有捕获值的唯一实例。这正是您使用 renderSquare 方法所做的，该方法在函数体内创建一个 i 的新实例，该实例现在由元素捕获。

编辑:

使用 let 绑定(bind)(每次迭代都会创建变量的新实例)也有效:

for (let a = 0, i = props.counter; a < 3; a++, i++) {
    ss.push(<Square key={i} value={props.squares[i]} onClick={() => props.onClick(i)}/>);
}