TypeError: _database_db_json__WEBPACK_IMPORTED_MODULE_2__.Ma

Question

我试图使用map方法访问我的本地数据库，但总是遇到此错误。

我想访问我的对象数组，并使用cards组件来显示它。

到处搜索我的语法，但我似乎找不到任何，我的代码有错误吗?

下面是我的代码:

import React, { Component } from 'react'
import { Container } from "react-bootstrap";
import products from '../database/db.json'
import {
Card,
Button
} from 'react-bootstrap'

export default class Home extends Component {
render() {
return(
products.map((products)=> {
return(
<Card style={{ width: '18rem', marginTop: '15px', marginRight: '15px' }} key={products.id}>
<div>
<Card.Img variant="top" src={products.images[0]} />
</div>
<Card.Body>
<Card.Title>{products.name}</Card.Title>
<Card.Text><strong>IDR {products.price.toLocaleString()},00</strong></Card.Text>
<div>
<Button variant="outline-light">
<i className="far fa-bookmark"></i>
</Button>
{/* <Button variant="outline-light" as={Link} to={`/detail?${item.id}`}>
<i className="fas fa-cart-plus"></i> Buy Now
</Button> */}
</div>
</Card.Body>
</Card>
)
})
)

，这是我的数据库:

{
"products": [
{
"id": 1,
"name": "Nike Air Brown",
"img": "https://images.unsplash.com/photo-1549298916-b41d501d3772?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1000&q=80",
"price": 1987000,
"stock": 8,
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse potenti nullam ac tortor vitae purus faucibus. In fermentum et sollicitudin ac orci phasellus egestas tellus. Eget sit amet tellus cras. "
},
{
"id": 2,
"name": "Nike Air Jordan",
"img": "https://images.unsplash.com/photo-1597248881519-db089d3744a5?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80",
"price": 2543000,
"stock": 9,
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse potenti nullam ac tortor vitae purus faucibus. In fermentum et sollicitudin ac orci phasellus egestas tellus. Eget sit amet tellus cras. "
},
{
"id": 3,
"name": "Nike Revolt",
"img": "https://images.unsplash.com/photo-1542291026-7eec264c27ff?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1050&q=80",
"price": 1765000,
"stock": 6,
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse potenti nullam ac tortor vitae purus faucibus. In fermentum et sollicitudin ac orci phasellus egestas tellus. Eget sit amet tellus cras. "
},
{
"id": 4,
"name": "Nike Green",
"img": "https://images.unsplash.com/photo-1596568359553-a56de6970068?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1028&q=80",
"price": 2143000,
"stock": 7,
"description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Suspendisse potenti nullam ac tortor vitae purus faucibus. In fermentum et sollicitudin ac orci phasellus egestas tellus. Eget sit amet tellus cras. "
}
],
"users": [],
"transactions": []
}

Answer 1

import products from '../database/db.json'指向整个JSON对象，因此您需要访问products键，即products.products.map((products)=> { ....。

以不同的名称导入它可能更有意义，如data。

import data from '../database/db.json';
...
data.products.map((product) => { ..... }