基于React在JavaScript中调用Java方法实现交易所资产价格展示咨询

DevOps 小满

2026-9-28

解决方案

后端Java侧调整
不需要修改你现有的Map存储结构，只需要暴露一个HTTP接口，将存储价格数据的Map作为接口返回值即可。如果是SpringBoot项目直接给接口所在类加@RestController注解，框架会自动把Map序列化为前端可识别的JSON格式，最终返回给前端的数据结构参考如下：

{
  "Coinbase": {
    "btcBuy": "43210.2",
    "btcSell": "43205.8",
    "ethBuy": "2263.5",
    "ethSell": "2262.1"
  },
  "Binance": {
    "btcBuy": "43208.7",
    "btcSell": "43204.2",
    "ethBuy": "2262.9",
    "ethSell": "2261.7"
  }
}

前端JS逻辑实现
在页面加载或者定时刷新的逻辑里调用后端接口拿数据，再把对应字段赋值给Exchange组件的属性即可，示例代码如下（React环境为例）：

import { useEffect, useState } from 'react'

function Middle() {
  // 定义存储价格数据的状态
  const [priceData, setPriceData] = useState({})

  // 页面加载时调用后端接口拉取数据
  useEffect(() => {
    const fetchPrice = async () => {
      const res = await fetch('你的后端接口地址')
      const data = await res.json()
      setPriceData(data)
      // 如果需要定时刷新价格，可以在这里加setInterval定时调用fetchPrice
    }
    fetchPrice()
  }, [])

  return (
    <div className='Middle'>
      <Exchange 
        name="Coinbase" 
        btcBuy={priceData?.Coinbase?.btcBuy || ''} 
        btcSell={priceData?.Coinbase?.btcSell || ''} 
        ethBuy={priceData?.Coinbase?.ethBuy || ''} 
        ethSell={priceData?.Coinbase?.ethSell || ''}
      />
      <Exchange 
        name="Binance" 
        btcBuy={priceData?.Binance?.btcBuy || ''} 
        btcSell={priceData?.Binance?.btcSell || ''} 
        ethBuy={priceData?.Binance?.ethBuy || ''} 
        ethSell={priceData?.Binance?.ethSell || ''}
      />
      <Recommendations/>
    </div>
  )
}