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, vousSETState code> une propriété nomméeres code>. Enfin, dansRender code> Vous déstructurez l'état code> et essayez d'extraire une propriété nomméepostems code>. Alors, lequel est-ce le nom correct? S'il vous plaît poster exactement ce qui est enregistré deconsole.log (this.state) code>Je l'ai corrigé grâce à la réponse @gilsdav