React开发常见问题：如何处理外层带data字段的接口响应数据并渲染

1. state赋值逻辑 #

你贴的第二种响应结构中，加密货币数组直接存放在外层对象的data属性下，不存在data.coins的层级，直接取data字段的值赋值给state的coins即可。
函数组件写法示例：

const [coins, setCoins] = useState([])

// 请求回调中赋值
const fetchCoins = async () => {
  const res = await fetch('你的接口地址')
  const resData = await res.json()
  // 直接取响应对象的data字段赋值，加||[]做异常兜底
  setCoins(resData.data || [])
}

类组件写法示例：

componentDidMount() {
  fetch('你的接口地址')
    .then(res => res.json())
    .then(resData => {
      this.setState({
        coins: resData.data || []
      })
    })
}

2. 渲染代码调整 #

注意第二种响应结构的字段命名已经从下划线格式改为驼峰格式，之前使用的price_usd对应新字段为priceUsd，渲染代码需要对应修改：

// 遍历渲染示例
{coins.map(coin => (
  <h1 key={coin.id}> {coin.name} {coin.priceUsd} </h1>
))}

3. 补充说明 #

赋值时加|| []是防御性处理，避免接口返回异常时resData.data为undefined，导致后续遍历数组时报错。

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