React中如何仅刷新API映射的指定div数据而非全量数据

这个需求完全可以实现，不需要额外写useEffect做依赖监听，核心逻辑就是更新状态时只替换目标条目的数据，保持其他条目数据引用不变，React做虚拟DOM对比时就只会重新渲染对应更新的div，不会碰其他节点。

具体实现步骤 #

• 编写单条数据刷新函数
  调用接口时只传入当前需要刷新的币种ID，拉取到最新数据后，遍历原有coins数组，仅替换ID匹配的那一项，其余条目保持原数据不变：

const refreshSingleCoin = async (coinId) => {
  try {
    // 仅请求目标币种的最新数据，不需要拉全量列表
    const res = await axios.get(
      `https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&ids=${coinId}&sparkline=false`
    )
    const latestCoinData = res.data[0]
    setCoins(prevCoins => 
      prevCoins.map(coin => coin.id === coinId ? latestCoinData : coin)
    )
  } catch (error) {
    console.log('单条数据刷新失败', error)
  }
}

• 给预留的刷新按钮绑定点击事件
  点击按钮时把当前条目的coin.id传入刷新函数即可：

<button 
  className="refreshBtnCoin"
  onClick={() => refreshSingleCoin(coin.id)}
></button>

注意事项 #

• 你之前的渲染代码里，有实际内容的外层div没加key属性，记得补上key={coin.id}，空的占位div反而加了key，这个写反了，不加key会导致React无法正确追踪条目变化，容易出现渲染错乱。
• 不需要单独写useEffect监听coins.id变化，你这个刷新是用户点击触发的主动操作，直接在点击事件里调请求逻辑就够了，加多余的useEffect依赖反而容易引发死循环或者不必要的请求。
• 如果要做自动持续更新（不需要用户手动点刷新），可以给每个条目单独设置定时器，每隔固定时间调用一次上面的refreshSingleCoin方法，记得在组件卸载、条目被删除时清除对应定时器避免内存泄漏；也可以统一做轮询，请求时把当前所有展示的币种ID拼接成参数传给接口，更新时还是用map替换的逻辑，不会触发全量重渲染。
• 如果需要做刷新中的加载态，单独维护一个refreshingId状态存当前正在刷新的币种ID即可，请求发起时设值、请求结束清空，不会影响其他条目的交互。

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