A continuación se muestra el error en la consola de mi navegador.
Warning: Each child in a list should have a unique "key" prop.
See https://reactjs.org/link/warning-keys for more information.
ExpenseList@http://localhost:3000/static/js/main.chunk.js:1481:7 div
Card@http://localhost:3000/static/js/main.chunk.js:2299:19 div
Expenses@http://localhost:3000/static/js/main.chunk.js:975:97 div
App@http://localhost:3000/static/js/main.chunk.js:252:89 index.js:1
Recibo este error incluso antes de ingresar cualquier gasto nuevo. He ido a la clase de lista de gastos y parece que no encuentro el uso. A continuación se muestra la clase ExpensesList
import React from "react";
import ExpenseItem from "./ExpenseItem";
import './ExpensesList.css';
const ExpenseList = props => {
if (props.expenses.length > 0) {
return props.expenses.map((expense) => (
<ul className="expenses-list">
<ExpenseItem
key={expense.id}
title={expense.title}
amount={expense.amount}
date={expense.date}
/>
</ul>
));
}
return <h2 className="expenses-list__fallback">Found No Expenses</h2>;
}
export default ExpenseList;
¡Bienvenido a StackOverflow! Su error está relacionado con el mapa que está utilizando en su código para representar la lista de gastos.
En React debes especificar un keyprops cada vez que renderizas una lista para ayudar a React a renderizar la lista correctamente:
return (
<ul className="expenses-list">
{props.expenses.map((expense) => (
<ExpenseItem
key={expense.id}
title={expense.title}
amount={expense.amount}
date={expense.date}
/>
))}
</ul>
);
Para obtener más información sobre claves y listas, puede leer React Docs .
Editado con la estructura correcta, gracias a Sobhan por el comentario.
Este artículo se recopila de Internet, indique la fuente cuando se vuelva a imprimir.
En caso de infracción, por favor [email protected] Eliminar
Déjame decir algunas palabras