redux 不确定此错误的含义...在“../actions/cartActions”中未找到导出“default”(作为“addToCart '导入)(可能的导出:添加到购物车)

3df52oht  于 2022-11-12  发布在  其他
关注(0)|答案(1)|浏览(76)

我正在学习React,Python,Django和Redux的教程。我遇到了这个错误,不知道该怎么做:在'../actions/cartActions'中未找到导出'default'(作为'addToCart'导入)(可能的导出:我确实理解useHistory已经贬值了,但不知道如何改变它。到目前为止,我一直在努力弄清楚这个错误。
CartScreen.js

import React, { useEffect } from "react";
import { Link } from "react-router-dom";
import { useDispatch, useSelector } from "react-redux";
import {
  Row,
  Col,
  ListGroup,
  Form,
  Image,
  Button,
  Card,
} from "react-bootstrap";
import Message from "../components/Message";
import addToCart from "../actions/cartActions";

function CartScreen({ match, location, history }) {
  const productId = match.params.id;
  const qty = location.search ? Number(location.search.split("=")[1]) : 1;

  const dispatch = useDispatch();

  const cart = useSelector((state) => state.cart);
  const { cartItems } = cart;

  useEffect(() => {
    if (productId) {
      dispatch(addToCart(productId, qty));
    }
  }, [dispatch, productId, qty]);

  return (
    <Row>
      <Col md={8}>
        <h1>Shopping Cart</h1>
        {cartItems.length === 0 ? (
          <Message variant="info">
            Your cart is empty <Link to="/"> Go Back</Link>
          </Message>
        ) : (
          <ListGroup variant="flush">
            {cartItems.map((item) => {
              <ListGroup.Item key={item.product}>
                <Row>
                  <Col md={2}>
                    <Image src={item.Image} alt={item.name} fluid rounded />
                  </Col>
                  <Col md={3}>
                    <Link to={`/product/${item.product}`}>{item.name}</Link>
                  </Col>
                  <Col md={2}>${item.price}</Col>
                </Row>
              </ListGroup.Item>;
            })}
          </ListGroup>
        )}
      </Col>
      <Col md={4}></Col>
    </Row>
  );
}

export default CartScreen;

cartActions.js

import axios from 'axios'
import {CART_ADD_ITEM } from '../constants/cartConstants'

export const addToCart = (id, qty) => async (dispatch,getState) =>{
    const {data} = await axios.get(`/api/products/${id}`)

    dispatch({
        type:CART_ADD_ITEM,
        payload:{
            product:data._id,
            name:data.name,
            image:data.image,
            price:data.price,
            countInStock:data.countInStock,
            qty
        }
    })

    localStorage.setItem('cartItems',JSON.stringify(getState().cart.cartItems))
}

App.js

import { Container } from 'react-bootstrap'
import { BrowserRouter as Router,Routes,  Route } from 'react-router-dom'

import Header from "./components/Header";
import Footer from "./components/Footer";
import HomeScreen from './screens/HomeScreen';
import ProductScreen from './screens/ProductScreen';
import CartScreen from './screens/CartScreen';

function App() {
  return (
  <Router>
    <Header />
    <main className="py-3">
      <Container>
      <Routes>
          <Route path="/" element={<HomeScreen />} exact />
            <Route path="/product/:id" element={<ProductScreen />} />
            <Route path='/cart' element={<CartScreen />} />
            <Route path='/cart/:id' element={<CartScreen />} />
          </Routes>
       </Container>
     </main>
     <Footer/>
     </Router>
  );
}

export default App;
4nkexdtk

4nkexdtk1#

在cartActions.js中尝试

const addToCart = (id, qty) => async (dispatch,getState) => 
{...}
export default addToCart

而不是export const addToCart = (id, qty) => async (dispatch,getState) => {...}

相关问题