react/redux app - 从 redux slice 获取操作以响应组件时出现问题答案

【问题标题】：react/redux app - issue when getting actions from redux slice to react componentreact/redux app - 从 redux slice 获取操作以响应组件时出现问题
【发布时间】：2021-06-17 18:34:15
【问题描述】：

您好，我正在使用 reduxtoolkit 创建一个反应应用程序，它具有添加到购物车功能我正在尝试使用 redux 状态更新添加到购物车按钮，当我获得用于递增和递减的 redux 操作时，它显示错误 ReferenceError：在初始化之前无法访问“selectadto”不确定我在这里缺少什么，如果有人知道请检查

我的组件在下面

import React, { useState, useEffect } from "react";

import { useDispatch, useSelector } from "react-redux";
import { selectAddSlice } from "./features/auth/addsSlice";
import { selectadto } from "./features/auth/addtoSlice";
import { increment, decriment } from "./features/auth/addtoSlice";

const Addtocart = (props) => {
  const dispatch = useDispatch();
  const selectedAdds = useSelector(selectAddSlice);
  const selectedTodo = useSelector(selectadto);

  useEffect(() => {
    console.log(selectedTodo);
  }, [selectedTodo]);
  const onIncrementclicked = (e) => {
    e.preventDefault();
    dispatch(increment());
  };
  const onDecrimentclicked = (e) => {
    e.preventDefault();
    dispatch(decriment());
  };
  return (
    <div>
      {selectedAdds.map((add) => (
        <div key={add.id}>
          <div> {add.addname}</div>
          <div> {add.price}</div>
          <button onClick={onIncrementclicked()}>{selectedTodo}</button>
          <button onClick={onDecrimentclicked()}>{selectedTodo}</button>
        </div>
      ))}
    </div>
  );
};

export default Addtocart;

我的 redux 切片在下面

import { createSlice } from '@reduxjs/toolkit';


export const addtoSlice = createSlice({
    name: 'addto',
    initialState: {
        currentamount: 0
    },
    reducers: {
        increment: state => {
            state.curentamount++
        },
        decriment: state => {
            state.currentamount--
        },
    },
});

export const { increment, decriment } = addtoSlice.actions;

export const selectadto = state => state.addto.currentamount;

export default addtoSlice.reducer;

错误信息如下

  TypeError: Cannot read property 'preventDefault' of undefined
onIncrementclicked
src/Addtocart.js:17
  14 |   console.log(selectedTodo);
  15 | }, [selectedTodo]);
  16 | const onIncrementclicked = (e) => {
> 17 |   e.preventDefault();
     | ^  18 |   dispatch(increment());
  19 | };
  20 | const onDecrimentclicked = (e) => {

【问题讨论】：

您好像调用了两个不同的东西selectadto ，尝试重命名一个const selectAddToCart = useSelector(selectadto);
increment 中有一个拼写错误 -> state.curentamount++（缺少 1 个r）你可能想要state.currentamount--。如果你想避免这样的错误：使用TypeScript。
@AjeetShah 更新了问题然后显示新错误
好的，我接受了
确定@AjeetShah 在那里 ping 那里

标签： reactjs redux ecmascript-6 react-redux redux-toolkit

【解决方案1】：

在const selectadto = useSelector(selectadto); 中，您声明了一个名为selectadto 的新变量，同时使用了一个名为selectadto 的reducer。您可能应该为两者之一指定不同的名称。

【讨论】：

我更新了问题，然后显示另一个错误