单击调度时超出最大调用堆栈大小

Question

我正在使用 redux 工具包将一个对象添加到我的数组中，因为我正在分派一个函数但是我收到了这个错误（我正在借助状态和参数将数据导入我的详细信息文件):

" Details.js:16 Uncaught RangeError: 超出最大调用堆栈大小在 addToCart (Details.js:16:1) "

这是我的详细资料文件

import {react,useEffect} from 'react';
import { useParams } from 'react-router-dom';
import {useDispatch,useSelector} from 'react-redux';
import {getProduct,addtocart} from '../features/productSlice'


function Details(){
    const params = useParams();
    const dispatch = useDispatch();

    useEffect(()=>{
        dispatch(getProduct(params.id))
    },[])

    function addToCart(){
        dispatch(addToCart(id));
    }

    const productdetail = useSelector((state)=> state.myproduct.product)
    const {title,image,description,price,id}= productdetail;

   console.log(params)
    return(
        <>
        <div className='container'>
             <img src={image}/>
            <h1>{title}</h1>
            <h5>{description}</h5>
            <h4>{price}</h4> 
        </div>
        <button 
            className='btn btn-warning'
            onClick={()=>{addToCart({id}) } 
        }
            > Add to cart </button>
         </>
    )
}

export default Details;

这是我的 Slice 部分


    const productSlice = createSlice({
        name:"myproduct",
        initialState,
        reducers:{
            getProduct:(state,action)=>{
                state.product = state.products.find((el) => el.id == action.payload)
            },
            addtocart:(state,action)=>{
                state.cart = state.cart.push(action.payload)
            },
            removefromcart:(state,action)=>{
                state.cart = action.payload
            }
        },

Answer 1

这应该有效

function addToCart({ id } = {}) {
    // dispatch(addToCart(id)); <- wrong, calls itself untill exceeds max call stack size throwing a RangeError
    dispatch(addtocart({ payload: id })); // i expect this to work, because "addtocart" is the action you're importing from "productSlice"
}

旁注：

我会简单地将 id 而不是 { id } 传递给“addToCart”按钮处理程序，并将 id 包装在 { payload: { id } }
我会将“addtocart”重命名为“addToCart”并将其导入为“addToCartAction”（同样适用于 productSlice 中的所有其他操作）

单击调度时超出最大调用堆栈大小

Maximum call stack size exceeded, on click dispatch

javascript

onclick

redux-toolkit