0
votes

Chercher un objet JSON et l'utiliser réactjs

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;


2 commentaires

Vous initialisez l'état avec messages en tant que propriété. Ensuite, vous SETState une propriété nommée res . Enfin, dans Render Vous déstructurez l'état et essayez d'extraire une propriété nommée postems . Alors, lequel est-ce le nom correct? S'il vous plaît poster exactement ce qui est enregistré de console.log (this.state)


Je l'ai corrigé grâce à la réponse @gilsdav


3 Réponses :


0
votes

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:

- xxx

- xxx

- xxx


3 commentaires

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 {} syntaxe pour afficher l'élément dans votre HTML


Merci ! Je vais essayer ça!



-1
votes
<Products myInput={someInput} />

0 commentaires

1
votes

Votre état n'a pas de propriété postems considéré comme non défini et réagirait donc ne serait pas restitué. Dans votre situation, il n'est pas nécessaire de définir un nouveau Const et d'utiliser l'état directement.

Aussi, lorsque vous SETState () , vous devez le dire quel état Propriété Il doit définir la valeur à. xxx


1 commentaires

Pas besoin de ... this.state car SETState fait des mises à jour partielles ( il fusionne les objets ). 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.