React中如何遍历嵌套JS对象？处理API返回的多层列表数据

先修正组件的Props接收方式 #

你的KlineInfo组件现在把整个props对象当成了myPasser，正确做法是解构props或者从props中取出myPasser属性：

import React from 'react'
    
const KlineInfo = ({ myPasser }) => { // 解构出myPasser
  return (
    <div>
      {/* 后续代码写在这里 */}
    </div>
  )
}

export default KlineInfo

或者不解构的写法：

const KlineInfo = (props) => {
  const myPasser = props.myPasser;
  // 后续代码
}

需求1：打印list中的单个子数组元素 #

先做空值判断避免报错，再直接访问list数组的索引：

import React from 'react'
    
const KlineInfo = ({ myPasser }) => {
  // 确保result和list存在，防止数据未加载时报错
  const targetList = myPasser?.result?.list || [];

  return (
    <div>
      {/* 打印第一个子数组到控制台 */}
      {targetList.length > 0 && console.log('第一个子数组:', targetList[0])}
      {/* 渲染第一个子数组到页面 */}
      {targetList.length > 0 && (
        <div>
          <h3>第一个子数组元素:</h3>
          <p>{targetList[0].join(', ')}</p>
        </div>
      )}
    </div>
  )
}

export default KlineInfo

需求2：遍历每个子数组的元素并存储 #

前端本地存储（用localStorage） #

把数据转成JSON字符串存入localStorage：

import React, { useEffect } from 'react'
    
const KlineInfo = ({ myPasser }) => {
  const targetList = myPasser?.result?.list || [];

  useEffect(() => {
    // 遍历每个子数组
    targetList.forEach((subArr, index) => {
      console.log(`第${index+1}个子数组元素:`, subArr);
      // 存储单个子数组到localStorage
      localStorage.setItem(`kline_subarr_${index}`, JSON.stringify(subArr));
    });

    // 也可以把整个list存入localStorage
    localStorage.setItem('kline_list', JSON.stringify(targetList));
  }, [targetList]); // 当targetList变化时执行存储逻辑

  return (
    <div>
      <h3>已完成子数组遍历存储</h3>
      {/* 渲染遍历后的内容到页面 */}
      {targetList.map((subArr, idx) => (
        <div key={idx}>
          <p>子数组{idx+1}: {subArr.join(', ')}</p>
        </div>
      ))}
    </div>
  )
}

export default KlineInfo

后端数据库存储（调用API提交） #

如果要存入数据库，需要后端提供存储接口，前端通过axios发送请求：

import React, { useEffect } from 'react'
import axios from 'axios';
    
const KlineInfo = ({ myPasser }) => {
  const targetList = myPasser?.result?.list || [];

  useEffect(() => {
    const saveData = async () => {
      // 遍历每个子数组，发送到后端接口
      for (const subArr of targetList) {
        try {
          await axios.post('/api/save-kline-data', { data: subArr });
          console.log('子数组存储成功:', subArr);
        } catch (err) {
          console.error('存储失败:', err);
        }
      }
    };

    targetList.length > 0 && saveData();
  }, [targetList]);

  return (
    <div>
      <h3>正在存储数据到数据库...</h3>
    </div>
  )
}

export default KlineInfo

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