Tengo problemas con la representación de la función de filtro. Creo que el problema es que no estoy devolviendo algo, pero no estoy tan seguro. Estoy usando reaccionar y un archivo json para mostrar datos. esta es la advertencia que recibo en mi consola "react-jsx-dev-runtime.development.js:117 Advertencia: cada elemento secundario en una lista debe tener una propiedad de "clave" única.
Compruebe el método de representación de SearchTable . Consulte https://reactjs.org/link/warning-keys para obtener más información. en tr"
El código:
import data from "../data.json"; const SearchTable = () => { const [searchTerm, setSearchTerm] = useState(""); return ( <div className="container"> <input type="text" placeholder="Search..." className="form-control" style ={{marginTop:50 ,marginBottom: 20, width : "40%"}} onChange= {(e)=>{ setSearchTerm(e.target.value); }} /> <table className="table table-bordered"> <thead className="thead-dark"> <tr> <th>Number</th> <th>PartitionId</th> <th>enqueueTime</th> </tr> </thead> <tbody> {data.filter((val) => { if(searchTerm === ""){ return val; } else if ( val.partitionId === searchTerm || val.enqueueTime === searchTerm ) { console.log("hej") return val; } }).map((m) => ( <tr key={m.id}> <td>{m.Nr}</td> <td>{m.partitionId}</td> <td>{m.enqueueTime}</td> </tr> ))} </tbody> </table> </div> ); }; export default SearchTable;```Si yo fuera usted, eliminaría la lógica empresarial de la plantilla. Lo que es más, la función que se pasa al método de filtro debe devolver verdadero si una entrada debe colocarse en una matriz filtrada o falso en caso contrario. Pongo debajo el código con una función de filtro genérico. Una cosa más, si la cadena está vacía, no hay razón para llamar a un filtro en la matriz. Si no desea filtrar, no use la CPU si no es necesario;)
PD. usó una clave de objeto inexistente al renderizar los elementos. Cámbielo a Nr o particionId.
PPS. Deberíamos cambiar la cadena buscada a minúsculas al igual que las entradas dentro del objeto de datos.
¡Salud! Si tiene alguna pregunta, estoy feliz de responderla.
import data from "../data.json"; import React, { useState, useEffect } from 'react'; const SearchTable = () => { const [searchTerm, setSearchTerm] = useState(""); const [filteredData, setFilteredData] = useState(data); const filterData = () => { if (searchTerm === '') { setFilteredData(data); return; } setFilteredData(data.filter(entry => { return Object.keys(entry).some(entryKey => { const entryValue = entry[entryKey].toString().toLocaleLowerCase(); return entryValue.contains(searchTerm); }) })); }; useEffect(filterData, [searchTerm]); return ( <div className="container"> <input type="text" placeholder="Search..." className="form-control" style ={{marginTop:50 ,marginBottom: 20, width : "40%"}} onChange= {(e)=>{ setSearchTerm(e.target.value.toLocaleLowerCase()); }} /> <table className="table table-bordered"> <thead className="thead-dark"> <tr> <th>Number</th> <th>PartitionId</th> <th>enqueueTime</th> </tr> </thead> <tbody> {filteredData.map((m) => ( <tr key={m.Nr}> <td>{m.Nr}</td> <td>{m.partitionId}</td> <td>{m.enqueueTime}</td> </tr> ))} </tbody> </table> </div> ); }; export default SearchTable;