Tengo un objeto que se pasa con accesorios. console.log registra el objeto correctamente, pero cuando intento registrar las propiedades, se muestran como undefined
TodoList.js
import React from 'react'; import {TodoItem} from './TodoItem.js'; export function TodoList({todos}){ return ( <ul> { todos.map( function(campos){ console.log('list.texto: ', campos.texto); return( <TodoItem props={campos} /> ); } ) } </ul> ); } TodoItem.js. Mire el console.log s
import React from 'react'; export function TodoItem(props){ console.log('item: ', props); console.log('item.texto1: ', props.texto); console.log('item.texto2: ', props["texto"]); return ( <li> <h4>Estado</h4> <p>{props["estado"]}</p> <h4>Fecha Apertura</h4> <p>{props["fechaApertura"]}</p> <h4>Texto</h4> <p>{props["texto"]}</p> </li> ); }Los elementos se representan "bien" pero vacíos y el código registra lo siguiente:
> list.texto: "Muestra" TodoList.js:10 > item: TodoItem.js:4 Object { "props": { "estado": 0, "fechaApertura": "2000-01-01", "fechaCierre": "2020-01-01", "texto": "Muestra" } } > item.texto1: undefined TodoItem.js:5 > item.texto2: undefined TodoItem.js:6¿Por qué las propiedades no están definidas?
Tienes dos cosas diferentes a las que llamas props . Primero, está pasando un objeto individual llamado props :
<TodoItem props={campos} /> Pero luego, en el extremo receptor, los props son todo el objeto de accesorios. El valor que pasó estaría en props.props :
export function TodoItem(props){ Una forma de solucionar esto es usando la desestructuración para asignar props.props. a una variable llamada props :
export function TodoItem({ props }){O considere cambiar el nombre del accesorio para causar menos confusión:
<TodoItem item={campos} /> // ... export function TodoItem({ item }){Hola porque tu capa de objeto tiene una capa más.
Puede pasar parámetros usando una asignación de desestructuración como ({ props }) o usar como el siguiente ejemplo
const props = { "props": { "estado": 0, "fechaApertura": "2000-01-01", "fechaCierre": "2020-01-01", "texto": "Muestra" } } console.log('item: ', props); console.log('item.texto: ', props['props']['texto']);