Hola, estoy trabajando en un rastreador de gastos en el que honestamente he estado atascado durante demasiado tiempo. Estoy tratando de representar mi componente de gastos varias veces. Sé que necesito mapearlo, así que no estoy seguro de cómo se supone que debo hacerlo desde donde estoy. Cualquier ayuda sería increíble, tengo problemas para reaccionar. Siento que estoy justo allí a pesar de que estoy luchando con esta aplicación básica.
const initialValues = {payment: '', purchase: '', date:'', location: '', price: ''}; const [formValues, setFormValues] = useState([initialValues]); const onHandleChange = (e) => { const value = e.target.value; setFormValues({...formValues, [e.target.name]: value }); }A continuación se muestra cómo estoy tratando de representar múltiplos de mi componente de gastos
const userRows = Object.keys(formValues).map((value) =>{ <Expense formValues={value} /> }) console.log(userRows) return( <table className="expense-container"> <tbody className='expense-list'> {userRows}Y debajo de este está mi componente de gastos
return( <tr className='tableRow expense'> <td className="mr-2">{formValues.payment}</td> <td className="mr-1">{formValues.purchase}</td> <td className="mr-1">{formValues.date}</td> <td className="mr-1">{formValues.location}</td> <td className="mr-1">{formValues.price}</td> </tr> )Como dijo Diego, le falta una declaración de devolución de la función de mapa userRows. Y cuando está pasando la propiedad formValue al componente Expense, solo está pasando una clave del objeto, no el objeto en sí. Esto se debe a que está mapeando las claves del objeto. Además, está inicializando su estado formValues como una matriz con un objeto dentro. Pero en su función handleChange está configurando el estado de un objeto.
No estoy seguro de cómo está estructurado el resto de su código, pero supongo que está tratando de tener un formulario donde un usuario pueda enviar un nuevo gasto. En lugar de usar el mismo estado para el formulario y los gastos, debe dividirlos en dos estados separados. Como esto.
const initialValues = {payment: '', purchase: '', date:'', location: '', price: ''} const [formValues, setFormValues] = useState(initialValues); const [expenses, setExpenses] = useState([]) const onHandleChange = (e) => { const value = e.target.value; setFormValues({...formValues, [e.target.name]: value }); } const onSubmit = () => { // Append new expense to the expenses array setExpenses(previousExpenses => [...previousExpenses, formValues]); // Reset Form setFormValues(initialValues); }Puede usar paréntesis para regresar inmediatamente del método del mapa.
// map over the expenses array and create a component based on each object in the array const userRows = expenses.map((expenseObject) =>( <Expense formValues={expenseObject} /> ))O simplemente use una declaración de devolución.
// map over the expenses array and create a component based on each object in the array const userRows = expenses.map((expenseObject) =>{ return (<Expense formValues={expenseObject} />) })También asegúrese de que en su componente Expense esté desestructurando los accesorios para obtener el accesorio formValues, que supongo que es lo que está haciendo.