React组件遍历API返回的带数字ID嵌套对象时UI无法渲染的问题求助

我看到你遇到的问题了——控制台能打印数据但UI不渲染，主要有几个关键问题需要修正，咱们一步步来解决：

1. 修正useState的惰性初始化写法 #

你当前的useState初始化写法有误，第二个参数并不是惰性初始化的正确位置。应该把初始化逻辑作为第一个参数的函数传入，这样只会在组件首次渲染时执行一次：

const [coinData, setCoinData] = useState(() => {
  const localData = localStorage.getItem("coinData");
  return localData ? JSON.parse(localData) : [];
});

2. 处理API返回的类数组coins对象 #

从你描述的结构"coins": 0:{...}29 items 1:{...}29 items来看，这个coins大概率是带数字键的对象（类数组），而非真正的数组。forEach能遍历它，但React的JSX需要数组来生成组件列表，所以我们需要先把它转换成标准数组：
在axios的then回调里，用Object.values()把对象的值提取成数组：

axios.request(options)
  .then((response) => {
    // 把类数组对象转成标准数组
    const coinsArray = Object.values(response.data.data.coins);
    setCoinData(coinsArray);
    localStorage.setItem("coinData", JSON.stringify(coinsArray));
  })

3. 用map替代forEach渲染组件 #

JSX中渲染列表必须使用map（因为forEach没有返回值，不会生成任何组件），同时要给每个组件添加唯一的key属性（React要求的性能优化和避免警告）：

<div className="cards-container">
  {coinData?.map((coin) => (
    <CryptoCard
      key={coin.id} // 用coin的唯一ID作为key，没有id的话也可以用rank
      name={coin.name}
      coinUrl={coin.websiteUrl}
      duration="4 minutes ago"
      symbol={coin.symbol}
      rank={coin.rank}
      exchanges={coin.numberOfExchanges}
      price={coin.price}
    />
  ))}
</div>

为什么原来的forEach不行？ #

Array.prototype.forEach()只是遍历数组元素执行回调，不会返回任何值，所以在JSX里写{coinData?.forEach(...)}相当于渲染undefined，自然看不到组件。而map()会遍历并返回一个新的组件数组，React可以把这个数组渲染到页面上。

把这几个点修正后，你的组件应该就能正常渲染每个加密货币卡片了。

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