React应用中通过Bootstrap映射RESTful API数据报错排查

你遇到的报错和括号语法没有关系，核心是3个逻辑/语法错误：

• 初始state.lists定义为空对象，接口返回的根数据也是普通对象，对象不存在map方法，首次渲染还没拿到接口数据时就会直接抛lists.map is not a function的错误
• 数据层级理解错误：接口返回的根数据不是数组结构，time是顶层的时间字段、bpi是存储三种法币汇率的键值对对象，不存在遍历根对象取list.time、list.bpi的逻辑
• 两个细节语法错误：一是React中DOM的类属性必须写className，写原生class会触发控制台警告；二是React不能直接渲染对象类型数据，time和bpi都是对象，直接写在花括号里会抛「对象不能作为React子元素」的错误。

App.js（仅调整初始值避免首次渲染报错，其余原有请求逻辑正常） #

import React, {Component} from 'react';
import Lists from './example/lists';

class App extends Component {
    state = {
        // 初始值设为null，渲染时做判空即可
        lists: null
    };

    componentDidMount() {
        fetch('https://api.coindesk.com/v1/bpi/currentprice.json')
            .then(res => res.json())
            .then((data) => {
                this.setState({ lists: data })
            })
            .catch(console.log)
    }

    render() {
        return (
            <Lists lists={this.state.lists} />
        )
    }
}

export default App;

Lists组件（核心修正数据映射逻辑） #

import React from 'react'

const Lists = ({lists}) => {
    // 接口数据未返回时先渲染加载提示，避免空值报错
    if (!lists) return <div>加载中...</div>

    // 将bpi对象转为可遍历的数组，每个元素对应一种货币的汇率数据
    const currencyList = Object.values(lists.bpi)

    return (
        <div>
            <center><h1>Bitcoin 汇率查询</h1></center>
            {/* 渲染顶层公共信息 */}
            <p>数据更新时间：{lists.time.updated}</p>
            <p className="text-muted">{lists.disclaimer}</p>
            {/* 遍历渲染三种货币的汇率卡片 */}
            {currencyList.map((currency) => (
                <div className="card mb-2" key={currency.code}>
                    <div className="card-body">
                        <h5 className="card-title">
                            {/* 接口返回的转义货币符号用该方式渲染，也可直接手动写$、£、€符号 */}
                            <span dangerouslySetInnerHTML={{__html: currency.symbol}}></span>
                            {currency.code} - {currency.description}
                        </h5>
                        <p className="card-text">当前汇率：{currency.rate}</p>
                    </div>
                </div>
            ))}
        </div>
    )
};

export default Lists

• 首次渲染阶段接口还未返回数据，先做判空处理，避免直接操作空值触发报错
• 汇率数据存储在bpi对象中，通过Object.values()提取所有货币对象组成数组，才能正常调用map遍历
• 所有渲染字段都取到字符串、数字这类基础类型，不要直接渲染对象
• 原生class替换为React要求的className后，和Bootstrap的类名完全兼容，后续调整样式直接修改类名即可。

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