0
231
ViewsLos accesorios no se pasan ni se rinden
Hola chicos, comencé a aprender sobre reaccionar, estoy tratando de pasar los accesorios de un componente a otro pero no se renderiza nada (o consola.registrado para el caso).
agradecería mucho su ayuda
Componente de usuarios
export class Users extends React.Component { render() { const { name } = this.props.user; return ( <div> <h1>{name}</h1> </div> ); } } import { Users } from './users.jsx'; export class WhoWatch extends React.Component { state = { users: [ { id: 1, name: 'Choo', series: ['Batman', 'Water'] }, { id: 2, name: 'Sho', series: ['Boo', 'Too'] }, { id: 3, name: "Cel'", series: ['Shoo', 'Rima'] }, ], }; // componentDidMount() {} render() { const { users } = this.state; return ( <div> {users.map((user, index) => { <div> <Users user={user} key={index} />; </div>; })} </div> ); } }3 answers
Answer question0
name no tiene una propiedad llamada name :
const { name } = this.props.name; O bien deconstruir props :
const { name } = this.props;O use la propiedad directamente sin deconstruir:
const name = this.props.name;Editar: parece que estás confundiendo un "usuario" y un "nombre" de varias maneras. Mira lo que estás pasando al componente:
<Users user={user.name} /> ¿Quieres pasar el usuario o quieres pasar el nombre? El componente actualmente espera un accesorio llamado name , así que páselo:
<Users name={user.name} />Alternativamente , puede pasar todo el usuario:
<Users user={user} /> Y luego, en el componente, deconstruya la propiedad del user :
const { name } = this.props.user;En general, es solo una cuestión de asegurarse de que lo que está pasando y lo que está esperando sean lo mismo. Puede comenzar a buscar en TypeScript para ayudar a hacer cumplir esto también en el momento del diseño.
0
WhoWatch.js
import React, { Component } from 'react'; import Users from './Users'; class WhoWatch extends Component { state = { users: [ { id: 1, name: 'Choo', series: ['Batman', 'Water'] }, { id: 2, name: 'Sho', series: ['Boo', 'Too'] }, { id: 3, name: "Cel'", series: ['Shoo', 'Rima'] }, ], }; render() { return ( <div> {this.state.users.map((item) => { return <Users user={item} />; })} </div> ); } } export default WhoWatch;Usuarios.js
import React, { Component } from 'react'; class Users extends Component { constructor(props){ super(props); console.log(props); } render() { const { name } = this.props.user; return ( <div> <h1>{name}</h1> </div> ); } } export default Users;Producción:
0
En el componente WhoWatch , pasa el nombre de usuario como valor de los accesorios de user en el componente User , no el objeto de usuario en sí.
<Users user={user.name} />; En el componente Users , está intentando obtener el name desestructurando la propiedad del user , que no es un objeto sino una cadena.
Simplemente debe pasar el objeto Usuario completo en lugar de solo el atributo de nombre. Como ese es el propósito de ese componente, debe pasar el objeto de usuario de esta manera
<Users user={user} />; Y esto resolverá automáticamente su problema y, como está en un mapa, cada elemento debe tener una propiedad key como esta
return ( <div> {users.map((user, index) => { <div> <Users user={user} key={index}/>; </div>; })} </div> );