React表格生成异常：Array.fill()与Array.from()的差异排查

问题现象 #

开发React表格生成器时遇到以下异常：

• 表单提交行列数后，用Array.fill()无法生成预期表格
• 替换为Array.from()就能正常渲染
• 直接硬编码数字类型的行列数时，Array.fill()又能正常工作

核心原因：参数类型不匹配 #

问题根源在表单输入值的类型：

• number类型输入框的onChange事件中，e.target.value返回的是字符串类型，不是数字
• 当把字符串传给Array(n)时，构造函数不会创建长度为n的空数组，而是把字符串作为单个元素生成数组（比如Array("4")得到["4"]，长度仅为1）
• 后续map只会执行1次，自然生成不了对应行列的表格
• 硬编码时用的是数字类型（比如Array(4)），构造函数会创建长度为4的空数组，fill()后能正常map渲染
• Array.from({length: n})会自动把n转为数字处理，所以不管传字符串还是数字都能生成对应长度的数组

修复方案 #

只需在提交时把输入值转为数字即可：

const handleSubmit = (e) => {
  e.preventDefault();
  // 将字符串转为数字类型
  setSubmitInput([Number(rowInput), Number(colInput)]);
}

也可以在GenerateTable组件内部统一处理参数类型：

function GenerateTable({ rows, cols }) {
  const rowCount = Number(rows);
  const colCount = Number(cols);
  return (
    <table>
      <tbody>
        {Array(rowCount).fill(null).map((_, rowIdx) => (
          <tr key={rowIdx}>
            {Array(colCount).fill(null).map((_, colIdx) => (
              <td key={colIdx}>1</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  )
}

关键差异验证 #

对比两种数组创建方式的表现：

• 字符串参数：Array("4") → ["4"]（长度1）；Array.from({length: "4"}) → [undefined, undefined, undefined, undefined]（长度4）
• 数字参数：Array(4) → [empty × 4]（长度4）；Array.from({length: 4}) → [undefined, undefined, undefined, undefined]（长度4）

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