React中如何循环渲染通过Axios获取的股票数据数组？

AI 小北

2026-9-27

问题根因

React渲染驱动逻辑不匹配：你使用普通局部变量存储股票列表，React仅会在state或props变更时触发组件重渲染，普通变量的修改无法被React感知，自然不会更新视图。
异步时序逻辑问题：你发起的多支股票详情请求是异步并行执行的，你没有等待所有请求完成的逻辑，也没有在数据就绪后触发视图更新。控制台能看到完整数据是浏览器控制台的特性：打印引用类型数据时，展示的是你点击展开时的最新值，而非打印执行那一刻的数组值，属于控制台的展示误导。

修复方案

步骤1：使用React state存储股票列表

在函数组件内通过useState声明响应式状态，状态变更时会自动触发组件重渲染：

import { useState, useEffect } from 'react'
import Axios from 'axios'
import cheerio from 'cheerio'

function YourComponent() {
  // 声明响应式股票列表状态
  const [stocksList, setStocksList] = useState([])
  // 可选：声明加载状态
  const [loading, setLoading] = useState(true)

步骤2：重构异步请求逻辑

使用Promise.all等待所有并行请求完成后，统一更新状态：

const fetchStocks = async () => {
    try {
      setLoading(true)
      // 第一步：拉取基础股票列表
      const baseRes = await Axios.get('http://localhost:3001/fetchStocks')
      const baseStockList = baseRes.data
      
      // 第二步：生成所有股票详情的请求Promise数组
      const detailRequestList = baseStockList.map(async (val) => {
        const url = 'https://www.tradegate.de/orderbuch.php?isin=' + val.stockTicker
        const detailRes = await Axios.get(url)
        const $ = cheerio.load(detailRes.data)
        return {
          sId: val.sId,
          stockName: $('#col1_content h2')[0].children[0].data,
          stockTicker: val.stockTicker,
          stockLast: $('#last')[0].children[0].data,
          stockDelta: $('#delta')[0].children[0].data,
          stockHigh: $('#high')[0].children[0].data,
          stockLow: $('#low')[0].children[0].data
        }
      })
      
      // 第三步：等待所有请求完成，更新状态
      const fullStockList = await Promise.all(detailRequestList)
      setStocksList(fullStockList)
    } catch (err) {
      console.error('请求失败：', err)
    } finally {
      setLoading(false)
    }
  }

步骤3：组件挂载时触发请求

通过useEffect在组件首次渲染完成后执行请求逻辑：

useEffect(() => {
    fetchStocks()
  }, [])

步骤4：渲染逻辑适配

增加加载态判断，避免空数组渲染异常：

return (
    <div>
      {loading ? (
        <p>加载中...</p>
      ) : (
        <ul>
          {stocksList.map(stock => (
            <li key={stock.sId}>{stock.stockName}</li>
          ))}
        </ul>
      )}
    </div>
  )
}

export default YourComponent

额外注意事项

直接在前端请求外部站点tradegate.de会触发跨域限制，建议把股票详情的请求逻辑移到你的后端接口http://localhost:3001侧实现，前端仅请求你自己的后端接口，避免CORS错误。

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