reactjs - (React-Redux)每当我试图从我的购物车中删除一个项目时抛出“dispatch is not a function”
问题描述
单击购物车部分中产品上的“-”按钮会通过“onDecreaseCountClicked”属性调用 removeItemFromCart()。removeItemFromCart()、调用 dispatch() 和 getState() 但返回错误“getState 不是函数”。不太清楚这里的问题是什么......
行动
import shop from '../api/shop'
import * as types from '../constants/ActionTypes'
const receiveProducts = products => ({
type: types.RECEIVE_PRODUCTS,
products
})
export const getAllProducts = () => dispatch => {
shop.getProducts(products => {
dispatch(receiveProducts(products))
})
}
const addToCartUnsafe = productId => ({
type: types.ADD_TO_CART,
productId
})
export const addToCart = productId => (dispatch, getState) => {
if (getState().products.byId[productId].inventory > 0) {
dispatch(addToCartUnsafe(productId))
}
}
const removeFromCartUnsafe = productId => ({
type: types.DELETE_SINGLE_ITEM,
productId
})
export const removeItemFromCart = productId => (dispatch, getState) => {
if (getState().products.byId[productId].inventory > 0) {
dispatch(removeFromCartUnsafe(productId))
}
}
export const checkout = products => (dispatch, getState) => {
const { cart } = getState()
dispatch({
type: types.CHECKOUT_REQUEST
})
shop.buyProducts(products, () => {
dispatch({
type: types.CHECKOUT_SUCCESS,
cart
})
})
}
应用程序.js
import React from 'react'
import ProductsContainer from './ProductsContainer'
import CartContainer from './CartContainer'
const App = () => (
<div>
<h2>Shopping Cart Example</h2>
<hr/>
<ProductsContainer />
<hr/>
<CartContainer />
</div>
)
export default App
CartContainer.js
import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { checkout } from '../actions'
import { getTotal, getCartProducts } from '../reducers'
import Cart from '../components/Cart'
const CartContainer = ({ products, total, checkout}) => (
<Cart
products={products}
total={total}
onCheckoutClicked={() => checkout(products)}
/>
)
CartContainer.propTypes = {
products: PropTypes.arrayOf(PropTypes.shape({
id: PropTypes.number.isRequired,
title: PropTypes.string.isRequired,
price: PropTypes.number.isRequired,
quantity: PropTypes.number.isRequired
})).isRequired,
total: PropTypes.string,
checkout: PropTypes.func.isRequired
}
const mapStateToProps = (state) => ({
products: getCartProducts(state),
total: getTotal(state)
})
export default connect(
mapStateToProps,
{ checkout }
)(CartContainer)
购物车.js
import React from 'react'
import PropTypes from 'prop-types'
import Product from './Product'
import {removeItemFromCart} from '../actions/index'
const Cart = ({ products, total, onCheckoutClicked }) => {
const hasProducts = products.length > 0
const nodes = hasProducts ? (
products.map(product =>
<>
<Product
title={product.title}
price={product.price}
quantity={product.quantity}
key={product.id}
onDecreaseCountClicked={() => removeItemFromCart(product.id)}
/>
<input type='number' value={product.quantity.toString()}/>
</>
)
) : (
<em>Please add some products to cart.</em>
)
return (
<div>
<h3>Your Cart</h3>
<div>{nodes}</div>
<p>Total: ${total}</p>
<button onClick={onCheckoutClicked}
disabled={hasProducts ? '' : 'disabled'}>
Checkout
</button>
</div>
)
}
Cart.propTypes = {
products: PropTypes.array,
total: PropTypes.string,
onCheckoutClicked: PropTypes.func
}
export default Cart
产品.js
import React from 'react'
import PropTypes from 'prop-types'
const Product = ({ price, quantity, title, onDecreaseCountClicked, key }) => (
<div>
{title} - ${price}{quantity ? ` x ${quantity}` : null}
{onDecreaseCountClicked && <button onClick={onDecreaseCountClicked()}>-</button>}
</div>
)
Product.propTypes = {
price: PropTypes.number,
quantity: PropTypes.number,
title: PropTypes.string
}
export default Product
解决方案
推荐阅读
- python - 如何创建具有基于 groupby 值的熊猫数据框向量
- bash - 无法使用 bash 脚本压缩具有多种内容的文件夹
- python - Python类型:描述常用属性
- sql - 从字符串中提取一个单词后的一个单词
- java - 布尔值可以是幻数吗
- react-native - 反应导航抽屉在屏幕上任何需要的地方拖动
- javascript - 当我第二次调用它时,getJSON 不是一个函数
- curl - 问题多卷曲与php页面加载更多时间
- c# - 如何在 carouselView 中反映 CarouselView.ItemsSource 中所做的更改?(Xamarin 形式)
- amazon-web-services - SageMaker:使用预训练模型转换端点输出