Html 组件无法使用setState挂钩正确重新渲染

我在教自己如何反应。我创建了一个小项目来熟悉React。我基本上希望滑块调整下面的网格大小。但是，更改滑块时，它会完全错误地重新渲染。它应该做的是创建一个正方形网格，其尺寸等于滑块值。栅格应始终为正方形，随着滑块值的变化，正方形的高度和宽度也应随之变化

右侧列应该有1列，但行数应与左侧的正方形相同。现在，它不会随着滑块而增长或收缩。对滑块值的任何更改只创建2个正方形，与滑块值无关

之前：

之后：

下面是代码的样子（运行NPX create react App后，只需将其粘贴到App.js中即可）。如果有人能解释我如何使其按预期工作，我将不胜感激：

import React，{useState}来自“React”；
导入“/App.css”；
类矩阵{
构造函数（行、列）{
this.rows=行；
this.cols=cols；
this.size=行*列；
this.values=新数组（this.size）.fill（“”）；
}
}
功能单元（道具）{
返回(
props.onChange（props.id，e.target.value）}
>
);
}
函数App（）{
let[dim，setDim]=useState（3）；
让[matrix，setMatrix]=useState（新矩阵（dim，dim））；
设[rhs，setRHS]=useState（新矩阵（dim，1））；
函数updateMatrix（i，值）{
让new_values=matrix.values.slice（）；
设new_matrix=新矩阵（matrix.rows，matrix.cols）；
新的_值[i]=值；
新矩阵值=新矩阵值；
setMatrix（新的_矩阵）；
}
函数更新器（i，值）{
让索引=i.替换（/\D/g，“”）；
让new_values=rhs.values.slice（）；
设new_矩阵=新矩阵（matrix.rows，1）；
新的_值[索引]=值；
新矩阵值=新矩阵值；
setRHS（新矩阵）；
}
函数updateSlider（值）{
setDim（值）；
}
函数handleClick（）{
console.log（矩阵值）；
控制台日志（rhs值）；
}
返回(
{Array.apply（null，Array（dim））.map（函数（x，i）{
const col=Array.apply（null，数组（dim））.map（函数（y，j）{
返回(
);
});
返回{col}；
})}
{Array.apply（null，Array（dim））.map（函数（x，i）{
返回(
);
})}
解决
updateSlider（event.target.value）}
>
);
}
导出默认应用程序；

.App{
文本对齐：居中；
宽度：500px；
保证金：自动；
/*背景：灰色*/
}
.矩阵{
/*浮动：左*/
显示：网格；
网格模板列：重复（2，1fr）；
网格模板行：重复（1，1fr）；
栅柱间隙：0px；
网格行间距：0px；
填充：10px；
利润率：10px；
}
.矩阵组件{
边界宽度：薄；
边框样式：实心；
边框颜色：黑色；
宽度：50px；
高度：50px；
}
.rhs{
左边距：40px；
显示：网格；
}

event.target.value

是一个字符串，因此可以将

dim

从整数切换为字符串。如果将

值

转换为整数，它将正常工作

  function updateSlider(value) {
    setDim(parseInt(value, 10));
  }

---

你的代码会抛出错误吗？我非常确定JS中的HTML段应该是字符串。不，代码不会抛出错误。即使在更改滑块时，它似乎也能工作，但渲染不正确。您知道在哪里查看是否抛出任何错误吗？我很确定你的代码应该会抛出错误。。。除非你在将其复制到stackOverflow时做了很多更改…我正在查看Chrome中的开发者控制台，它似乎没有显示任何错误-我将在原始帖子中发布一个屏幕截图。“失败”、“重新正确渲染”、“重新完全错误渲染”和“按预期工作”是什么意思？从图像或问题上看不清楚问题是什么。请看你是英雄！谢谢你，该死的，我现在明白了。我会投票接受，但我的排名太低了。不用担心！很乐意帮忙！

  function updateSlider(value) {
    setDim(parseInt(value, 10));
  }