Estoy enfrentando un problema al tratar de eliminar filas en una tabla de reacción, soy totalmente novato con la biblioteca, tengo una tabla con un botón de papelera en cada fila. El comportamiento esperado es hacer clic en la papelera, la actualización de estado elimina este elemento de fila y la actualización de la tabla sin la fila eliminada.
Actualmente, cuando actualizo el estado, no sé por qué, vuelve a su valor inicial, una matriz vacía.
Hice un ejemplo minimalista de mi problema en este codeSandbox: https://codesandbox.io/embed/currying-rain-w9z83?fontsize=14&hidenavigation=1&theme=dark
App.js contiene el elemento principal que obtiene los datos y crea la definición de columnas, luego lo pasa al elemento secundario. El elemento Child solo construye la tabla.
Cuando presione el botón de la papelera, se llamará al método para eliminar la fila, pero el estado volverá a su valor inicial: una matriz vacía.
Probé algunas cosas desde ahora, como deshabilitar la actualización automática de la tabla de reacción, pasar los métodos como accesorios y hacer que las definiciones de columna en el componente Tabla hagan referencia a la función pasada como accesorios.
También intenté hacer un botón que llamara al mismo método fuera de ReactTable y no enfrenté el problema, como que el estado no se restableció, así que estoy seguro de que el problema proviene de ReactTable, no lo sé. tal vez ganchos internos o algo así.
Entonces, por el momento estoy completamente atascado, totalmente sin idea.
Gracias de antemano por su ayuda y su tiempo.
setState es asíncrono, por lo que debe usar la versión de la función aquí. Esto es cierto siempre que necesite crear el nuevo estado en función del valor del estado anterior.
Además, eliminé el gancho useMemo y arreglé los errores de linter.
No descarte la regla de linter de deps exhaustivos tan simplemente. Casi siempre es correcto.
Por cierto, respondiendo algo que no preguntó, si tiene un estado que cambia en función de otro estado, considere usar useReducer en lugar de useState.
import "./styles.css"; import React, { useState, useEffect } from "react"; import Table from "./table"; /*eslint-disable no-self-compare*/ export default function Patients() { const [patients, setPatients] = useState([]); function handlePatientRowDelete(row) { setPatients((prev) => patients.filter((item) => item.id !== row.original.id) ); } useEffect(() => { setPatients([ { id: 1, fullname: "Jeanne", diagnostic: "check" }, { id: 2, fullname: "Bernard", diagnostic: "check2" }, { id: 3, fullname: "Jacquot", diagnostic: "check3" } ]); }, []); const columns = [ { Header: "Actions", id: "expander", Cell: ({ row }) => ( <span className="action-icons"> <span {...row.getToggleRowExpandedProps()}> {row.isExpanded ? ( <i className="bi bi-chevron-down"></i> ) : ( <i className="bi bi-chevron-right"></i> )} </span> <span> <i className="bi bi-trash-fill" onClick={() => handlePatientRowDelete(row)} ></i> </span> </span> ) }, { Header: "Nom complet", accessor: "fullname" }, { Header: "Diagnostic", accessor: "diagnostic" } ]; return ( <div className="container content-table"> <Table data={patients} columns={columns} /> </div> ); }