Je passe une URL sélectionnée particulière (données) à partir d'un composant (liste.JS) à un composant (DD.JS), DD.JS a deux composants, à gauche et à droite, je souhaite afficher des données dans le composant de gauche. Donc, ont passé les accessoires à la composante gauche, mais je reçois l'erreur de dire
Les objets ne sont pas valides comme un enfant de réaction (trouvé: objet avec des touches {URL}) p> blockQuote>
. Si vous vouliez rendre une collection d'enfants, utilisez plutôt un tableau. p>
dd.js p>
xxx pré> gauche.js p>
xxx pré> list.js p>
<tbody> { this.state.urls.map( (list,i) => { return( <tr key={i}> <td> <Link to={{pathname:`/service/${this.service_name}/requests`, state:{url:this.state.urls[i]}}} onClick={()=>this.selectedUrlHandler(i)}>{list} </Link> </td> <td>{this.service_name}</td> </tr> ); }) } </tbody>
3 Réponses :
L'URL n'est pas une chaîne, il s'agit d'un objet et de réagir ne peut pas rendre des objets dans JSX. Vous pouvez vérifier cela en convertissant cela en chaîne.
<Left url={JSON.stringify(data)} />
Ce n'est pas vrai. Réagir accepte et gère les objets dans des accessoires.
Oui avez essayé cela, je reçois l'objet entier comme une chaîne, mais j'ai besoin de la partie valeur de l'objet.
Montrer quelle clé vous vouliez montrer dans le composant parent comme {url.key}
Oui, vous pouvez envoyer des objets dans des accessoires mais j'ai dit qu'il ne peut pas rendant des objets directement dans JSX. Vous devez imprimer la valeur de certaines touches. @Valdimir Serykh
@Duay - oui quand je fais {obj.key} plus comme l'URL.URL (la solution dont j'avais besoin), je reçois les données, mais il n'est pas possible de rendre cet objet entier?
Non, réagir ne vous permet pas de rendant des objets. Vous pouvez créer un tableau des objets et une boucle pour afficher les données. @nnavant
D'accord, je l'ai eu, merci
Étant donné que l'URL est transmise un objet à la composante gauche qui a essayé de le rendre, vous obtenez une erreur. Au lieu de cela, rendez-vous à la place de la propriété particulière de l'objet comme
J'ai essayé votre extrait, mais rien n'est rendu, c'est vide, mais quand je fais console.log, je suis indéfini.
Vous ne pouvez pas rendre un objet comme un enfant d'un nœud dans le composant réactif. Pour ce faire, vous pouvez régler l'objet, c'est-à-dire ou p> Vous pouvez rendre une valeur particulière à la fois de l'objet. P> export default class Left extends Component{
render(){
let url = this.props.url
return(
<div>
{url.url1}
{url.url2}
</div>
);
}
}
Plus probablement
ceci.props.location.state est un objet, c'est pourquoi vous obtenez cette erreurPourriez-vous montrer le fichier list.js?
Vous êtes probablement un objet de rendu de cette manière:
{obj} . Essayez de le décomposer manuellement comme{obj.value} (cela dépend de la structure d'objet).