React中如何提取嵌套数组内所有对象到单个数组并过滤undefined

针对你这种嵌套数组（子数组数量、元素数量不固定，包含对象和undefined）的场景，可以用数组原生方法一步完成对象提取和过滤，不用先扁平化再单独做filter处理。

方法一：使用flatMap（最简洁） #

flatMap可以先对每个子数组做过滤，再自动将结果扁平化合并成一维数组，刚好匹配你的需求。

示例代码：

import { useState } from 'react';

function App() {
  // 模拟你的嵌套数组状态
  const [nestedArray, setNestedArray] = useState([
    [{ name: 'A' }, undefined, { name: 'B' }],
    [undefined, { name: 'C' }],
    [{ name: 'D' }, undefined]
  ]);

  // 一步提取所有对象并过滤undefined
  const extractedObjects = nestedArray.flatMap(subArray => 
    // 若子数组存在null需排除，可追加`item !== null`判断
    subArray.filter(item => item !== undefined && typeof item === 'object')
  );

  return (
    <div>
      <h3>提取后的对象数组：</h3>
      {extractedObjects.map(obj => <div key={obj.name}>{obj.name}</div>)}
    </div>
  );
}

export default App;

方法二：使用reduce（更灵活可控） #

如果需要更精细的遍历控制，用reduce逐个处理子数组元素，符合条件就推入结果数组：

const extractedObjects = nestedArray.reduce((result, subArray) => {
  subArray.forEach(item => {
    // 可根据实际场景调整判断条件
    if (item !== undefined && typeof item === 'object') {
      result.push(item);
    }
  });
  return result;
}, []);

状态更新时直接处理 #

如果是从输入生成嵌套数组的同时就需要提取对象，可以在设置状态时同步处理：

// 假设inputData是从输入获取的原始嵌套数组
const handleInput = (inputData) => {
  setNestedArray(inputData);
  // 直接处理并保存提取后的对象数组
  const objects = inputData.flatMap(sub => sub.filter(item => item !== undefined && typeof item === 'object'));
  setExtractedObjects(objects);
};

如果提取后的数组依赖nestedArray的变化，用useEffect自动更新：

import { useState, useEffect } from 'react';

function App() {
  const [nestedArray, setNestedArray] = useState([/* 初始数据 */]);
  const [extractedObjects, setExtractedObjects] = useState([]);

  useEffect(() => {
    const objects = nestedArray.flatMap(subArray => 
      subArray.filter(item => item !== undefined && typeof item === 'object')
    );
    setExtractedObjects(objects);
  }, [nestedArray]);

  // ...其他逻辑
}

注意：如果子数组中可能存在null值，记得在判断条件里加上item !== null，避免误把null当成有效对象处理。

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