Estoy mapeando matrices sin agregar claves a los niños que causan este error.
react_devtools_backend.js:4026 Warning: Each child in a list should have a unique "key" prop.¿Cómo puedo deshacerme de este error con esta estructura solo sin nada específico para cada niño en cada asignación?
Aquí está mi estructura de matriz:
[ [ { title: 'McRoyale', price: 70, count:5, totalPrice: 350 }, { title: 'Big Mac', price: 55, count:1, totalPrice: 55 }, ], [ { title: 'Double Big Tasty', price: 99, count:2, totalPrice: 198 }, ], [ { title: 'Grand Chicken Premier', price: 72, count:3, totalPrice: 216 }, { title: 'Spicy Chicken Fillet', price: 60, count:2, totalPrice: 120 }, ] ]y aquí está mi código:
<tbody> {cardItems.map((items) => ( <tr> <td> {items.map((item) => ( <> <b className='mc-red'>{item.title}</b> Item Price:{' '} {item.price} LE, Item Count: {item.count}, Item Total Price:{' '} {item.totalPrice} LE <br /> </> ))} </td> <td>{calcPrice(items)} LE</td> </tr> ))} </tbody>Los elementos JSX que se crean dinámicamente (p. ej., usando map ) deben tener una propiedad key , de acuerdo con el documento oficial .
Otra nota es que esta clave debe ser consistente incluso si la lógica dinámica cambia. Por ejemplo, no puede usar el índice del elemento en la matriz como clave porque eso puede cambiar. Debe usar algún valor que sea consistente.
Con eso en mente, es simple usar el title de cada elemento como la clave para su map interno. Sin embargo, para el map exterior, si puede asegurarse de que los items nunca cambien:
// This never changes [ { title: 'McRoyale', price: 70, count:5, totalPrice: 350 }, { title: 'Big Mac', price: 55, count:1, totalPrice: 55 }, ] luego puede usar los títulos de todos sus elementos para hacer la key , así:
import { Fragment } from 'react'; <tbody> {cardItems.map((items) => ( <tr key={items.map((item) => item.title).join('')}> <td> {items.map((item) => ( <Fragment key={item.title}> <b className="mc-red">{item.title}</b> Item Price: {item.price}{' '} LE, Item Count: {item.count}, Item Total Price:{' '} {item.totalPrice} LE <br /> </Fragment> ))} </td> <td>{calcPrice(items)} LE</td> </tr> ))} </tbody>