在React函数中捕获修改YGOPRO API返回价格数值的实现咨询

逻辑放置位置 #

直接在接口请求拿到返回数据后、调用setData之前完成所有价格计算逻辑，提前把每个卡片需要的衍生字段处理好再存入state，渲染时直接读取即可，无需分散逻辑到渲染环节。

原有代码问题修正 #

• 原接口参数拼接逻辑存在重复传参问题，首次拼接URL时已经携带了价格参数，后续无需重复追加
• 原价格计算逻辑放在了组件根作用域，组件首次渲染时API请求还未返回，此时读取的data还是初始空数组，无法拿到有效数值
• 接口返回的data是卡片数组，不能直接通过data.name读取单张卡片属性，需要遍历处理

改造后完整代码 #

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

export default function TestView() {
  const startprice = 5.0
  const endprice = 99999.99
  const [cards, setCards] = useState([])
  const priceFormatter = new Intl.NumberFormat("en-US", {
    style: "currency",
    currency: "USD",
    minimumFractionDigits: 2,
  })

  useEffect(() => {
    getCardDataByPrice(startprice, endprice)
      .then(({ data }) => {
        // 在此处复用原有HTML项目的计算逻辑处理所有卡片
        const processedCards = data.data.map(card => {
          const priceArray = []
          // 跳过没有卡包数据的卡片
          if (!card.card_sets) return null
          
          card.card_sets.forEach(set => {
            const setPrice = parseFloat(set.set_price)
            // 跳过无效价格
            if (!setPrice || setPrice === 0 || set.set_price === "0.00") return
            priceArray.push(setPrice)
          })
          // 跳过没有有效价格的卡片
          if (priceArray.length === 0) return null
          
          const minPrice = Math.min(...priceArray)
          const maxPrice = Math.max(...priceArray)
          // 把原有字段和计算得到的新字段合并返回
          return {
            ...card,
            minPrice,
            maxPrice,
            minPriceUsd: priceFormatter.format(minPrice),
            maxPriceUsd: priceFormatter.format(maxPrice)
          }
        }).filter(Boolean) // 过滤掉无效的空值卡片
        setCards(processedCards)
      })
      .catch(error => console.error(`Error: ${error}`))
  }, [])

  function getCardDataByPrice(startprice, endprice) {
    const ygoproURL = "https://db.ygoprodeck.com/api/v7/cardinfo.php"
    // 修正重复传参问题，直接拼接参数即可
    let ygoproEndpoint = `${ygoproURL}?startprice=${startprice}&endprice=${endprice}`
    return axios.get(ygoproEndpoint)
  }

  // 渲染时直接遍历处理好的cards数组即可
  return (
    <div className="card-list">
      {cards.map(card => (
        <div key={card.id} className="card-item">
          <h3>{card.name}</h3>
          <p>卡片类型：{card.type}</p>
          <p>最低售价：{card.minPriceUsd}</p>
          <p>最高售价：{card.maxPriceUsd}</p>
          {/* 按需添加其他需要展示的字段 */}
        </div>
      ))}
    </div>
  )
}

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