Sigo recibiendo lo anterior a continuación cuando ejecuto este código. No veo nada malo en él y no sé por qué devuelve el error anterior. solía funcionar antes, pero después de volver hoy, me dio este error. ¿Hay algún problema con esto?
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);Solucionar conflictos de nombres
Solo acepte un argumento en el controlador de eventos
Llame a las funciones del creador de acciones redux desde los accesorios (después de que tengan el contenedor de despacho) no directamente desde las importaciones. De lo contrario, simplemente devolverán la acción sin despacharlos a la tienda.
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);Considere usar ganchos de reacción redux para un uso de API más simpleDispatch