ReactJS：动态创建的HTML表格状态变更未渲染问题求助

核心问题在于你把htmlRows存成了状态变量，但它只在组件初始化时基于初始的formData生成了一次——后续formData更新时，htmlRows并没有重新计算，还是旧的内容。你之前加的setHtmlRows((o) => [...o])只是复制了旧数组的引用，并没有基于新的formData生成新的行，所以表格不会更新。

正确的做法是不要把htmlRows存为状态，而是每次渲染时直接基于当前的formData动态生成表格行：

1. 删掉htmlRows的useState声明，换成一个实时计算的变量：

// 移除原来的const [htmlRows, setHtmlRows] = useState(...)
// 直接在组件内实时计算表格行
const htmlRows = formData.map((row, rowIndex) => (
  <tr key={rowIndex}>
    {row.map((cell, cellIndex) => (
      <td key={cellIndex}>
        <input
          value={cell}
          onChange={(e) => {
            // 更新formData的逻辑保持不变
            const newFormData = [...formData];
            newFormData[rowIndex][cellIndex] = e.target.value;
            setFormData(newFormData);
          }}
        />
      </td>
    ))}
  </tr>
));

2. 在渲染表格的位置直接使用这个htmlRows变量即可。

这样每次formData更新触发组件重新渲染时，htmlRows都会基于最新的formData重新生成，输入框的内容自然会同步显示在表格里。

额外提醒：如果你的表格行/单元格有业务层面的唯一标识，尽量不要用index作为key，避免潜在的渲染性能问题或意外bug，不过在这个简单场景下用index暂时可以满足需求。

内容的提问来源于stack exchange，提问作者user5369