Tengo una tabla con algunos campos y quiero colocar un ícono de papelera en cada fila y luego eliminar esa fila cuando se hace clic en ella. Tengo un problema en esa fila para mostrar ese ícono y enviar el campo customerId de la fila correspondiente a la función de eliminación.
Copié el ícono de la papelera del sitio de arranque Aquí está el código:
import React, { useEffect, useState } from 'react'; import * as ReactBootStrap from 'react-bootstrap'; import * as service from '../service/FetchCustomerService'; import Button from 'react-bootstrap/Button' function MainPanel() { const [customers, setCustomers] = useState([]); useEffect(() => { const fetchPostList = async () => { const response = await service.getCustomerList(); setCustomers(response.data); console.log(response.data) }; fetchPostList() }, []); const deleteCustomer = (customerId) => { // CALL DELETE FUNCTION WITH CUSTOMERID console.log(customerId); } return ( <ReactBootStrap.Table striped bordered hover> <thead> <tr> <th>ID</th> <th>FirstName</th> <th>LastName</th> <th>Delete</th> </tr> </thead> <tbody> {customers && customers.map((item) => ( <tr key={item.id}> <td>{item.id}</td> <td>{item.firstName}</td> <td>{item.lastName}</td> //problem is the following line <td><Button onClick={this.deleteCustomer(this.customerId)} className='bi-trash'>Delete</Button></td> </tr> ))} </tbody> </ReactBootStrap.Table> ); } export default MainPanel;Pero con esto, solo aparece un botón sin ícono y no puedo pasar el ID de cliente a la función, el error es:
MainPanel.js:45 Uncaught TypeError: Cannot read properties of undefined (reading 'deleteCustomer')¿Cómo puedo solucionar eso?
No desea utilizar this.deleteCustomer ya que está utilizando un componente funcional.
quieres usar
<Button onClick={() => deleteCustomer(customerId)}></Button> Si solo pasa deleteCustomer(customerId) , probablemente activará la función al cargar. Si pasa una devolución de llamada como la anterior, debería funcionar según lo previsto.
No funciona porque la biblioteca de fuentes impresionantes requiere que hagas el ícono con una etiqueta i. Está aplicando el nombre de clase a un elemento de botón que no funcionará. A continuación se muestra lo que debería ser.
Por ejemplo:
<i class="bi-trash"></i>Una vez que tenga el ícono en la página, puede envolver la etiqueta i con su botón:
<Button onClick={this.deleteCustomer(this.customerId)}> <i class="bi-trash"></i> </Button>Este ejemplo directamente anterior funcionará, pero dado que está usando reaccionar, debe usar el componente FontAwesomeIcon. (Instale Font Awesome como una dependencia si aún no lo ha hecho. Enlace a la documentación aquí: https://fontawesome.com/docs
Para este ícono específico, está vinculado aquí: https://fontawesome.com/icons/trash?s=solid
Importaciones:
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faTrash } from "@fortawesome/free-solid-svg-icons";Botón completo:
<Button onClick={this.deleteCustomer(this.customerId)}> <FontAwesomeIcon icon={faTrash} /> </Button>Ahora, en cuanto a por qué dice que no puede leer esta propiedad indefinida. Tienes que quitar esto. al comienzo de las referencias a la función, eso es para componentes basados en clases y esto es funcional. Así que con esta corrección:
<Button onClick={() => deleteCustomer(this.customerId)}> <FontAwesomeIcon icon={faTrash} /> </Button>El motivo del () => al principio es que, si no lo incluye, React lo tratará como onload y lo ejecutará una vez que se cargue el componente.