React条件渲染组件问题：加密货币币种切换显示异常求助

我帮你排查了代码里的问题，主要是两个核心点导致切换开关后报错，下面给你一步步修复方案：

1. 修复API请求的触发时机 #

你的useEffect依赖数组是空的，这意味着只有组件第一次挂载时才会调用API拿数据。当切换开关修改currency后，不会重新发起请求，导致后续渲染时拿不到对应币种的报价数据，自然会抛出错误。

把currency加入到useEffect的依赖数组中，这样每次currency变化时都会重新请求对应币种的数据：

useEffect(() => { 
  axios.get(`http://localhost:9000/api/${currency}`).then( 
    (response)=>{ 
      setCoins(response.data) // 无需先清空数组，直接赋值新数据即可
    }) 
}, [currency]) // 新增currency作为依赖项

2. 修正开关切换的状态判断逻辑 #

setSwitchState是异步操作，你在调用它之后立刻用switchState判断，拿到的还是旧的状态值，这会导致币种设置完全反了（比如开关切到INR时，代码还以为是USD）。

直接用开关返回的event值来设置currency就可以，不用依赖旧的状态：

<BootstrapSwitchButton 
  checked={switchState} 
  onlabel='USD' 
  offlabel='INR' 
  onChange={(event)=>{ 
    setSwitchState(event) 
    // 直接用当前开关的状态设置币种
    setCurrency(event ? "USD" : "INR") 
  }}
/>

3. 简化表格渲染逻辑 #

你现在根据switchState写了两遍几乎完全一样的map渲染逻辑，不仅冗余还容易出错。可以直接根据当前的currency来取对应报价，简化代码：

{filterCoins.map((coin)=>{ 
  // 根据当前币种获取对应的报价数据
  const currentQuote = coin.quote[currency];
  return(
    <Coin 
      key={coin.id} 
      name={coin.name} 
      symbol={coin.symbol} 
      price={currentQuote.price} 
      change24hr={currentQuote.percent_change_24h} 
      marketCap={currentQuote.market_cap} 
      vol24hr={currentQuote.volume_24h}
    /> 
  ) 
})}

做完这三处修改后，切换开关时会正确更新currency，触发API重新请求对应币种的数据，表格也会自动渲染最新的价格信息，就不会再出现报错了。

内容的提问来源于stack exchange，提问作者sudhanva shankara.m