Recibo el error único de ket prop al mapear sobre la matriz. Estoy usando una identificación única y veo los registros en la consola.
// MaximumTemperature.js const Data = (data) => [ <td>{data.type}</td>, ... ] const DataRow = (props) => { return ( <tr> <Data {...props} /> </tr> ) } const DataBody = ({ model }) => { console.log(model.maximumTemperature()) return ( <tbody> { model.maximumTemperature().map(data => <DataRow key={data.id} {...data} />) } </tbody> ) }He agregado una identificación de incremento automático a cada objeto usando este método
data.forEach((o, i) => o.id = i + 1); // google chrome data example 0: id: 1997 place: "Aarhus" ... [[Prototype]]: Object 1: id: 2001 place: "Copenhagen" ... [[Prototype]]: Objectcada objeto que tiene una identificación todavía arroja ese error
Error
index.js:1 Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information. at Data (http://localhost:3000/static/js/main.chunk.js:906:18) at tr at DataRow at tbody at DataBody (http://localhost:3000/static/js/main.chunk.js:957:3) at table at http://localhost:3000/static/js/vendors~main.chunk.js:18635:23 at push../src/components/items/MaximumTemperature.js.__webpack_exports__.default (http://localhost:3000/static/js/main.chunk.js:976:3) at div at http://localhost:3000/static/js/vendors~main.chunk.js:13846:23 at div at http://localhost:3000/static/js/vendors~main.chunk.js:17957:23 at divuuid() creará una nueva identificación cada vez que se represente el componente.
Debe calcular y asignar los ID a cada elemento de la matriz antes de renderizar para que permanezcan consistentes en todos los renderizados. Asegúrese de que los ID se calculen solo una vez durante el ciclo de vida del componente.
Seguir lo anterior asegurará que las claves sean estables, pero también debe asegurarse de que sean únicas.
Si cada elemento de la matriz tiene una propiedad que es única, utilícela como key en lugar de generar ID.
No creo que necesites i uuid como clave, con i de iterar hace el trabajo:
// view.js const DataBody = ({ model }) => ( <tbody> { model.maximumTemperature().map((data,i)=> <DataRow key={i} {...data} />) } </tbody> )