如何从接口返回的数组中提取指定列数据并分组存储？

你遇到的length不可用问题，大概率是因为response.data.rows不是标准JavaScript数组，而是可迭代的类数组对象（比如数据库查询结果集、自定义迭代器等）。解决思路是先将其转换为标准数组，再用map、reduce这类优雅的数组方法提取列数据，完全不需要while循环。

方案一：用map单独提取每一列 #

先通过Array.from()或扩展运算符[...rows]把类数组转成标准数组，再用map提取对应索引的列：

import { useState, useEffect } from 'react';
import axios from 'axios';

const Query3 = () => {
    // 用对象存储各列数据，结构更清晰
    const [columns, setColumns] = useState({ years: [], countries: [] });
    const queryId = 'query3';

    useEffect(() => {
        const loadQueryInfo = async () => {
            const response = await axios.get(`http://localhost:5000/${queryId}`);
            const rows = response.data.rows;
            // 转成标准数组，解决length不可用的问题
            const rowsArray = Array.from(rows);
            
            // 提取年份（第0列）和国家（第1列），根据实际列索引调整
            const years = rowsArray.map(row => row.at(0));
            const countries = rowsArray.map(row => row.at(1));
            
            setColumns({ years, countries });
        }
        loadQueryInfo();
    }, [queryId]);

    return (
        <>
            <h3>Query 3 Results</h3>
            <p>Years: {columns.years.join(', ')}</p>
            <p>Countries: {columns.countries.join(', ')}</p>
        </>
    );
}

export default Query3;

方案二：用reduce一次遍历生成所有列（更高效） #

如果需要提取多列，用reduce只需遍历一次就能生成所有列的数组，避免多次遍历开销：

// 在useEffect的loadQueryInfo函数内替换列提取部分：
const rowsArray = Array.from(rows);
const columnData = rowsArray.reduce((acc, row) => {
    acc.years.push(row.at(0));
    acc.countries.push(row.at(1));
    // 可继续添加其他列，比如acc.gdpValues.push(row.at(2))
    return acc;
}, { years: [], countries: [] });

setColumns(columnData);

关键说明 #

• Array.from(rows)：将可迭代对象/类数组转换为标准数组，之后就能使用所有数组方法（map、reduce、length等）。即使rows本身是数组，这一步也不会有问题，属于安全操作。
• row.at(index)：ES2022新增的方法，比row[index]更友好——索引超出范围时返回undefined而非报错。若环境不支持，直接替换为row[index]即可。
• 对象存储列数据：相比单个数组，结构更清晰，后续渲染或数据处理更便捷。

内容的提问来源于stack exchange，提问作者Brian.H