TypeError:Cannot read 'map' of undefined 加密货币列表渲染报错如何解决

问题原因 #

• 核心报错是因为初始渲染时cryptos为undefined：你用的useGetCryptosQuery是异步请求钩子，组件首次挂载时请求还没有返回结果，cryptoList默认是undefined，所以初始化useState时cryptoList?.data?.coins取值为undefined，直接调用.map()方法就会抛出该错误。
• 状态同步逻辑错误：useState的初始值只会在组件首次挂载时执行一次，后续哪怕异步请求完成、cryptoList拿到了返回数据，cryptos这个本地状态也不会自动更新，还是会保持初始的undefined。
• 模板字符串语法错误：代码中'/crypto/${currency.id}'和'${currency.rank}. ${currency.name}'用了单引号包裹，不会正确解析变量，需要换成反引号（`）包裹才会生效。

修复方案 #

你可以按照下面的逻辑修改代码：

1. 先处理请求加载状态，请求未完成时展示加载提示，避免渲染空列表
2. 给数组兜底默认空数组，避免undefined调用map
3. 如果你需要保留本地cryptos状态做搜索、筛选等后续逻辑，可以加useEffect监听请求返回的数据同步更新状态；如果不需要额外处理，甚至可以直接用接口返回的数据，不用单独存本地状态，直接在组件内定义const cryptos = cryptoList?.data?.coins || []即可，代码更简洁。

修复后的参考代码 #

import { Card, Row, Col, Input, Spin } from 'antd'
import React, { useEffect, useState } from 'react'
import { Link } from 'react-router-dom'
import { useGetCryptosQuery } from '../services/CryptoApi'
import millify from 'millify'

const Cryptocurrencies = () => {
    const { data: cryptoList, isFetching } = useGetCryptosQuery()
    const [cryptos, setCryptos] = useState([]) // 初始化兜底空数组

    // 监听接口返回数据，更新本地状态
    useEffect(() => {
        if (cryptoList?.data?.coins) {
            setCryptos(cryptoList.data.coins)
        }
    }, [cryptoList])

    if (isFetching) return <Spin size="large" style={{ display: 'block', margin: '50px auto' }} />

    return (
        <div>
           <Row gutter = {[32,32]} className = "crypto-card-container">
                {cryptos.map((currency) => (
                        <Col xs = {24} sm = {12} lg = {6} className = "crypto-card" key = {currency.id}>
                            {/* 模板字符串改用反引号包裹 */}
                            <Link to = {`/crypto/${currency.id}`}>
                                <Card
                                title = {`${currency.rank}. ${currency.name}`}
                                extra = {<img className = "crypto-img" src = {currency.iconUrl} alt={currency.name}/>}
                                hoverable
                                >
                                <p>Price : {millify(currency.price)}</p>
                                <p>Market Cap : {millify(currency.marketCap)}</p>
                                <p>Daily Change : {millify(currency.change)}</p>
                                </Card>
                            </Link>
                        </Col>
                ))}
           </Row>
        </div>
    )
}

export default Cryptocurrencies

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