TypeError: map is not a function React读取本地db.json渲染卡片报错如何解决

问题原因&修复方案 #

• 报错的核心原因是你调用map方法的目标不是数组：你导入的../database/db.json整体是一个对象，数组存在该对象的products属性下，你直接对整个JSON对象调用map自然会报错。
• 第二个问题是字段不匹配：你的JSON数据里单条商品的图片字段名是img，但代码里写的是images[0]，会导致图片渲染报错。
• 第三个问题是React渲染规则不符合：Class组件的render方法必须返回单个根节点，你直接返回map生成的多个Card组件不符合要求，需要用容器包裹。
• 小优化点：map回调的参数名和外层数组重名，建议改成单数避免混淆。

修正后代码 #

import React, { Component } from 'react'
import { Container } from "react-bootstrap";
// 导入整个JSON对象
import db from '../database/db.json'
import {
    Card,
    Button
} from 'react-bootstrap'


export default class Home extends Component {
    render() {
        return(
            <Container>
                {/* 从导入的db对象中取products数组再调用map */}
                {db.products.map((product)=> {
                    return(
                        <Card style={{ width: '18rem', marginTop: '15px', marginRight: '15px' }} key={product.id}>
                            <div>
                                {/* 字段名改为JSON里的img */}
                                <Card.Img variant="top" src={product.img} />
                            </div>
                            <Card.Body>
                                <Card.Title>{product.name}</Card.Title>
                                <Card.Text><strong>IDR {product.price.toLocaleString()},00</strong></Card.Text>
                                <div>
                                    <Button variant="outline-light">
                                        <i className="far fa-bookmark"></i>
                                    </Button>
                                </div>
                            </Card.Body>
                        </Card>
                    )
                })}
            </Container>

        )
    }
}

内容的提问来源于stack exchange，提问作者Gandang Nur Panoeluh