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

只需将产品更改为产品，因为要更正声明的位置

尝试导入错误：“../Product”不包含默认导出（导入为“Product”）

1 个答案: