TypeError：无法读取未定义的属性（读取“preventDefault!!”）答案

【问题标题】：TypeError: Cannot read properties of undefined (reading 'preventDefault!!')TypeError：无法读取未定义的属性（读取“preventDefault!!”）
【发布时间】：2022-01-12 16:06:43
【问题描述】：

当我运行此代码时，我不断收到以下内容我看不出它有什么问题，也不知道为什么它会返回上述错误。它以前可以工作，但是今天回到它之后，它给了我这个错误。这有问题吗？

TypeError: Cannot read properties of undefined (reading 'preventDefault!!')

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import styled from "styled-components";
import { axiosWithAuth } from "./auth/axiosWithAuth";
import { useHistory, useParams} from "react-router-dom";
import { deleteItem, getItems, addItems} from "./state/actionCreators";


const FetchData = props => {
const { id } = useParams();
const [ item ] = useState([])

function addItems(e, item){
  e.preventDefault();
  addItems(item)
}


        return (
            // <Link to={`/Cart/${props.item}`}>
              <div className="item-card-container">
              <StyledItems className="styled-card">
              <h4>{props.item.title}</h4>
              <img src ={props.item.image} alt= '' />
              <h4>{props.item.description}</h4>
              <h4>${props.item.price}</h4>
              <h4>{props.item.category}</h4>

              <button onClick={(e, item) => addItems(e, item)}>
                        Add to cart
                    </button>
        </StyledItems>
        </div>
    // </Link>
  );
};

const mapDispatchToProps = dispatch => ({
  addItem: item => dispatch(addItems(item))
});

export default connect(
  null,
  mapDispatchToProps
)(FetchData);

【问题讨论】：

抱歉编辑了希望大家理解
你有两个addItems，一个是action，一个是click listener。更改其中一个函数的名称。
你是什么意思
addItems} from "./state/actionCreators"; 和 function addItems(e, item){ 命名相同。请考虑重命名其中之一？
它不工作我不能添加任何项目

标签： javascript reactjs preventdefault

【解决方案1】：

修复命名冲突

在事件处理程序中只接受一个参数

从 props 调用 redux 操作创建器函数（在它们具有调度包装器之后），而不是直接从导入中调用。否则他们将简单地返回操作而不将它们分派到商店。

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import styled from "styled-components";
import { axiosWithAuth } from "./auth/axiosWithAuth";
import { useHistory, useParams} from "react-router-dom";
import { deleteItem, getItems, addItems} from "./state/actionCreators";


const FetchData = props => {
    const { id } = useParams();
    const [ item ] = useState([])

    function addItemHandler(e, item){
        e.preventDefault();
        props.addItem(item)
    }


        return (
            // <Link to={`/Cart/${props.item}`}>
              <div className="item-card-container">
              <StyledItems className="styled-card">
              <h4>{props.item.title}</h4>
              <img src ={props.item.image} alt= '' />
              <h4>{props.item.description}</h4>
              <h4>${props.item.price}</h4>
              <h4>{props.item.category}</h4>

              <button onClick={(e) => addItemHandler(e, item)}>
                   Add to cart
              </button>
        </StyledItems>
        </div>
    // </Link>
  );
};

const mapDispatchToProps = dispatch => ({
  addItem: item => dispatch(addItems(item))
});

export default connect(
  null,
  mapDispatchToProps
)(FetchData);

考虑使用 react redux 钩子以获得更简单的 API useDispatch

【讨论】：