React useState 初始化二维数组后操作时首元素始终为空问题咨询

问题根源 #

你初始化useState时传入的参数为[[]]，这代表二维数组的初始状态本身就包含一个索引为0的空数组元素。后续你每次执行[...array, 新元素]的追加逻辑，都是在已有数组的末尾新增内容，不会改动初始的第一个元素，因此索引0的空元素会一直存在。

修复方案 #

方案1（推荐）：调整初始值 #

如果你不需要初始带一个空数组，直接将初始值设置为空数组即可：

const [array, setArray] = useState([]);

调整后重复调用4次追加逻辑，最终得到的数组会包含4个['test', 'test2']元素，没有多余的空首项。

方案2：适配现有初始化逻辑 #

如果业务场景必须保留初始的[[]]结构，可以在更新时做判断，首次更新直接替换数组，后续再追加：

const handleAdd = () => {
  let updatedArray;
  // 判断当前是否为初始的空数组状态
  if (array.length === 1 && array[0].length === 0) {
    updatedArray = [['test', 'test2']];
  } else {
    updatedArray = [...array, ['test', 'test2']];
  }
  setArray(updatedArray);
}

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