如何从react js嵌套数组js文件中提取数据？

import React, { Component } from 'react';
import dataFile from './data.js'; // 假设需要提取数据的文件是data.js

class DataExtractor extends Component {
  constructor(props) {
    super(props);
    this.state = {
      extractedData: [],
    };
  }

  componentDidMount() {
    fetch(dataFile) // 加载数据文件
      .then((response) => response.text())
      .then((data) => {
        const parsedData = JSON.parse(data); // 将数据文件解析为JavaScript对象
        const extractedData = this.extractData(parsedData); // 提取数据
        this.setState({ extractedData }); // 将提取的数据保存到state中
      })
      .catch((error) => {
        console.error('Error:', error);
      });
  }

  extractData(data) {
    // 使用递归或遍历算法，对嵌套数组进行遍历并提取数据
    // 这里仅提供一个简单的示例，实际情况可能需要根据数据结构进行适当的修改
    const extractedData = [];
    data.forEach((item) => {
      if (Array.isArray(item)) {
        extractedData.push(...this.extractData(item));
      } else {
        extractedData.push(item);
      }
    });
    return extractedData;
  }

  render() {
    const { extractedData } = this.state;
    return (
      <div>
        <h1>提取的数据：</h1>
        <ul>
          {extractedData.map((item, index) => (
            <li key={index}>{item}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default DataExtractor;