为何向useState数组添加数字会导致不可迭代，添加字符串却正常？

核心原因 #

十有八九是你在代码的某个地方错误地把rows的状态设置成了单个数字（而非数组），导致后续使用展开运算符...rows时触发「不可迭代」的错误。

为什么追加字符串时没问题？因为字符串本身属于可迭代类型——哪怕rows意外变成了单个字符串，...rows也能正常展开成字符数组；但数字不是可迭代类型，一旦rows变成数字，[...rows, 1]就会直接抛出TypeError: rows is not iterable。

排查与解决步骤 #

• 检查所有setRows调用：确保每次传入的都是数组类型。比如删除操作时，别写setRows(rows[0])，要写成setRows([rows[0]])；清空状态要写setRows([])而非setRows(null)或其他非数组值。
• 用函数式更新避免闭包坑：如果你的状态更新依赖于前一次状态，优先用函数式更新，确保拿到最新的状态值：

  const handleAdd = () => {
    setRows(prevRows => [...prevRows, 1]); // 用prevRows获取最新状态
  };
  

• 可选：加状态校验（JavaScript环境），在更新前确认状态类型，避免意外赋值：

  const handleUpdate = (newValue) => {
    if (Array.isArray(newValue)) {
      setRows(newValue);
    } else {
      console.warn('Attempted to set rows to non-array value:', newValue);
    }
  };
  

错误示例与修正 #

错误写法（会把rows变成数字）：

// 删除最后一项的错误逻辑
const handleDelete = () => {
  if (rows.length === 1) {
    setRows(rows[0]); // 错误：传入单个数字，rows状态变为非数组
  } else {
    setRows(rows.slice(0, -1));
  }
};

正确写法：

const handleDelete = () => {
  if (rows.length === 1) {
    setRows([]); // 正确：保持数组类型，清空数组
    // 若要保留单个元素：setRows([rows[0]])
  } else {
    setRows(rows.slice(0, -1));
  }
};

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