Je suis très nouveau chez JS et ReactJ et j'essaie de chercher un point final qui me donne un objet JSON comme celui-ci:
import React, {Component} from 'react'; class Products extends Component { constructor(props){ super(props); this.state = { posts: {} }; }; componentWillMount() { fetch('http://localhost:3000/product/4317892') .then(res => res.json()) .then(res => { this.setState({ res }) }) .catch((error => { console.error(error); })); } render() { console.log(this.state) const { postItems } = this.state; return ( <div> {postItems} </div> ); } } export default Products;
3 Réponses :
J'ai 3 noms pour la même chose dans votre JS: messages, postems et res. Réagir ne peut pas déterminer pour vous que les messages = postems = res. Donc, apportez des modifications comme ceci:
- p> - p> - p>
Merci ! Je peux maintenant avoir le Json dans la DIV, mais maintenant comment je peux analyser ce JSON dans différents composants tels que les paragraphes ou les divs?
@Oskll J'avais mis à jour la réponse avec un exemple. Il vous suffit d'utiliser {} code> syntaxe pour afficher l'élément dans votre HTML
Merci ! Je vais essayer ça!
<Products myInput={someInput} />
Votre état n'a pas de propriété Aussi, lorsque vous postems code> considéré comme
non défini code> et réagirait donc ne serait pas restitué. Dans votre situation, il n'est pas nécessaire de définir un nouveau
Const code> et d'utiliser l'état directement.
SETState () code>, vous devez le dire quel état Propriété Il doit définir la valeur à. p>
Pas besoin de ... this.state code> car
SETState code> fait des mises à jour partielles ( il fusionne les objets i>). La propagation de l'état précédent n'est requise que si vous faites des mises à jour approfondies et que vous n'avez besoin que pour les objets / tableaux parent de la pièce que vous mettez à jour, pas pour l'état entier.
Vous initialisez l'état code> code> avec
messages code> en tant que propriété. Ensuite, vous
SETState code> une propriété nommée
res code>. Enfin, dans
Render code> Vous déstructurez l'état code> et essayez d'extraire une propriété nommée
postems code>. Alors, lequel est-ce le nom correct? S'il vous plaît poster exactement ce qui est enregistré de
console.log (this.state) code>
Je l'ai corrigé grâce à la réponse @gilsdav