尝试导入错误："../产品"不包含默认导出(作为"产品"导入)

Question

我面临过这个挑战。帮助我如何处理它。似乎问题是关于导入和导出，但我已经尝试导出组件"；产品"；作为默认，但我还没有取得任何进展

import { useState, useEffect } from "react";
import { commerce } from "./lib/commerce";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Products from "./components/Products";
const App =  () => {
const [products, setProducts] = useState([]);
const fetchProducts = async () => {
const response = await commerce.products.list();
setProducts((response && response.data) || []);
};
useEffect(() => {
fetchProducts();
}, []);
console.log({ products });
return <Router>
<div>
<Switch>
<Route exact path="/">
<Products products={products} />
</Route>
</Switch>
</div>
</Router>;
};
export default App;

import {
Card,
CardMedia,
CardContent,
CardActions,
Typography,
CardActionArea,
Button,
} from "@material-ui/core";
import { ShoppingCart } from "@material-ui/icons";
import "./style.css";
const Product = ({ product, addProduct = () => {} }) => (
<Card ClassName="custom-card">
<CardActionArea>
<CardMedia
component="img"
alt="Contemplative Reptile"
height="260"
className="card-image"
image={product.media.source}
title="Contemplative Reptile"
/>
<CardContent className="content">
<Typography className="title" gutterButtom variant="h5" component="h2">
{product.name}
</Typography>
</CardContent>
</CardActionArea>
<CardActions className="actions-content">
<>
<Typography className="price" gutterButtom variant="h5" component="h2">
{product.price.formatted_with_symbol}
</Typography>
<Button
size="large"
className="custom-button"
onClick={() => {
addProduct(product.id, 1);
}}
>
<ShoppingCart /> Add to basket
</Button>
</>
</CardActions>
</Card>
);
export default Product;

/src/App.jsx找不到文件："index.jsx"与磁盘上的相应名称不匹配："。\src\components\Products\Products。

Answer 1

只需将"产品"更改为"产品"，因为需要在"声明"处更正