如何移除数组中嵌套的首个空数组？React数组对比问题排查

1. 是否是useState初始值为空数组导致的？ #

是。

你的useEffect依赖receivedItems，当组件首次渲染时，若receivedItems的初始值是空数组（比如你声明状态时写的const [receivedItems, setReceivedItems] = useState([])），这个useEffect会立即触发，把空数组推到newItems中，这就是Array_1首个元素为空数组的直接原因。

2. 如何移除Array_1中嵌套的首个空数组？ #

有两种可行思路，优先从源头避免空数组被加入，也可以直接清理已生成的数组：

从源头避免（推荐） #

修改useEffect，仅当receivedItems非空时才更新数组：

useEffect(() => {
  // 只有receivedItems不是空数组时才添加
  if (receivedItems.length !== 0) {
    setNewItems((newItem) => [...newItem, receivedItems]);
  }
}, [receivedItems]);

清理已生成的数组 #

如果已经得到了带空数组的Array_1，可以用以下方式处理：

• 直接移除第一个元素（确定首个元素是空数组时使用）：

const cleanedArray = Array_1.slice(1);

• 过滤所有空数组元素（数组中可能存在多个空数组时使用）：

const cleanedArray = Array_1.filter(item => item.length > 0);

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