Estoy seguro de que esto se preguntó antes, pero no puedo encontrarlo. Estoy tratando de pasar un objeto anidado como accesorios a una clase React.Component pero sigo recibiendo este error:
react-dom.development.js:13231 Uncaught Error: Objects are not valid as a React child (found: object with keys {props, context, refs, updater}). If you meant to render a collection of children, use an array instead.Tengo un archivo App.tsx creado así:
import React from "react"; export type Child = { id: number } export type Parent = { id: number, child: Child } export class Card extends React.Component<Parent> { render() { return <div> Parent ID: {this.props.id} Child ID: {this.props.child.id} </div>; } } function App() { const data: any = { "id": 1, "child": { "id": 2 } } const card: Card = new Card(data); return ( <div className="app"> {card} </div> ); } export default App;¿No es posible este tipo de cosas? Parece que debería serlo, pero tal vez me estoy perdiendo algo. ¿Hay alguna manera de hacer que algo como esto funcione o un patrón correcto que no estoy usando? ¡Gracias!
No hay una forma correcta de pasar un objeto a un componente secundario, hay varios enfoques, uno de los cuales es el siguiente (usando su ejemplo):
import React from "react"; export type Child = { id: number } export type Parent = { id: number, child: Child } export class Card extends React.Component<Parent> { render() { return <div> Parent ID: {this.props.id} Child ID: {this.props.child.id} </div>; } } function App() { const data: any = { "id": 1, "child": { "id": 2 } } return ( <div className="app"> <Card {...data} /> </div> ); } export default App;Estoy bastante seguro de que para que esto funcione, tendrías que cambiar
<div className="app"> {card} </div>A:
<div className="app"> <card /> </div>PERO, como dijo Jack en los comentarios, no debería crear instancias de componentes React como este de todos modos. En lugar de hacer:
const card: Card = new Card(data);Solo debes hacer:
<div className="app"> <Card {...data} /> </div>