Tengo una matriz de objetos que uso para enumerar valores en la página con el mapa. Pero de vez en cuando recibo este error.
Advertencia: cada niño en una lista debe tener un accesorio de "clave" único.
Aunque las llaves son únicas.
¿Quizás alguien sabe qué podría estar mal aquí?
const items = [ {key: 1, name: 'Item one', value: 34 }, {key: 2, name: 'Item two', value: 45 }, {key: 3, name: 'Item three', value: 12 }, ] const item = ({ name, value, key }) => ( <div> <p>{name}</p> <p>{value}</p> </div> ) return( <div> {items.map(i => item(i))} </div> )item debe ser un componente, y los nombres de los componentes de React deben estar en mayúsculas. Su componente Item está esperando un objeto. Su "clave" debe colocarse en el componente asignado.
// Accepts items // From each object in the array it gets the // key, name, and value, and returns a new // component function Example({ items }) { return ( <div> {items.map(item => { const { key, value, name } = item; return <Item key={key} value={value} name={name} /> })} </div> ); } // Accepts an object - returns some JSX to be rendered function Item({ name, value }) { return ( <div> <p>{name}</p> <p>{value}</p> </div> ); } const items = [ {key: 1, name: 'Item one', value: 34 }, {key: 2, name: 'Item two', value: 45 }, {key: 3, name: 'Item three', value: 12 }, ]; ReactDOM.render( <Example items={items} />, document.getElementById('react') ); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>solo necesita pasar la clave en child div como lo he hecho en su código a continuación. Creo que eliminará su error a continuación.
import React from 'react'; import './style.css'; export default function App() { const items = [ { key: 1, name: 'Item one', value: 34 }, { key: 2, name: 'Item two', value: 45 }, { key: 3, name: 'Item three', value: 12 }, ]; const item = ({ name, value, key }) => ( <div key={key}> <p>{name}</p> <p>{value}</p> </div> ); return <div>{items.map((i) => item(i))}</div>; }Para consultar: https://reactjs.org/docs/lists-and-keys.html