Javascript 如何使用循环将正确的计数器值推送到React中的HTML元素？

我正在通过一个简单的循环创建一个3 x 3表，如下所示：

  React.useEffect(() => {
    const _array = [];
    let i = -1;
    for (let c = 1; c < 4; c++) {
      for (let r = 1; r < 4; r++) {
        i++;
        _array.push(
          <div
            key={`x${c}x${r}`}
            className={`x${c}x${r}`}
            onClick={() => console.log(i)}
          >
            {i}
          </div>
        );
      }
    }
    setArray(_array);
  }, []);

React.useffect（（）=>{
常量数组=[]；
设i=-1；
for（设c=1；c<4；c++）{
for（设r=1；r<4；r++）{
i++；
_array.push(
console.log（i）}
>
{i}
);
}
}
setArray（_数组）；
}, []);

每个

中的

console.log（i）

返回8，尽管

{i}

每次都打印正确的数字

如何使用此循环在每个div内编码正确的

I

---

要复制，您可以在上看到完整的代码。

您不应该将React元素存储在state中，而应该只存储以后可以呈现的数据

根据状态应该只包含表示UI状态所需的最小数据量。因此，它不应包含React成分。基于基础的

道具和
状态在
render（）中构建它们


函数应用程序（）{
const[array，setArray]=React.useState（[]）；
React.useffect（（）=>{
常量数组=[]；
设i=-1；
for（设c=1；c<4；c++）{
for（设r=1；r<4；r++）{
i++；
_push（{id:`x${c}x${r}`，内容：i}）；
}
}
setArray（_数组）；
}, []);
返回(
{array.map（（项）=>(
console.log（item.content）}
>
{item.content}
))}
);
}
ReactDOM.render（，document.getElementById（'root'））

为什么要在状态下存储React组件？@ZsoltMeszaros我正在生成一个3x3的表。我还有别的办法吗？很明显，我不想硬编码数字。只是添加了一个答案，希望能有所帮助。谢谢你的解释。我现在明白了误用的原因。我很高兴能帮上忙。：）