À l'aide de chercher à rendre les données json à réagir app

Je suis en train de rendre certains JSON d'une personne endroit à partir d'une api dans mon réagir app.

Je suis en utilisant isomorphe chercher d'accéder aux données de l'API, j'pouvez ajouter la base de test et correctement les journaux les données à l'aide ci-dessous.

 require('isomorphic-fetch');
 require('es6-promise').polyfill();

 var url = 'http://localhost:3000/api/data'

 fetch(url)
    .then(function(response) {
    if (response.status >= 400) {
       throw new Error("Bad response from server");
    }
    return response.json();
  })
  .then(function(data) {
     console.log(data);
  });

Ce que je suis en train de travailler est la façon dont je peux profiter de cette réponse et l'afficher dans mon composant qui ressemble actuellement présente (dans cet exemple de code ci-dessous des données de provenance locale fichier json j'ai donc besoin de les fusionner).

J'ai tenté de mettre en place componentDidMount mais pourrait obtenir ma tête autour de la syntaxe de sorte qu'il arrêtait pas de se casser, j'ai aussi vérifié redux actions, mais qui a explosé mon cerveau.

const personLoc = Object.keys(data.person.loc).map((content, idx) => {
    const items = data.person.loc[content].map((item, i) => (
        <p key={i}>{item.text}</p>
    ))

    return <div key={idx}>{items}</div>
})

export default function PersonLocation() {
    return (
        <div className="bio__location">
            {personLoc}
        </div>
    )
}

OriginalL'auteur Ash | 2016-08-19

  1. 15

    componentDidMount devrait setState:

    componentDidMount() {    
  var that = this;
  var url = 'http://localhost:3000/api/data'

  fetch(url)
  .then(function(response) {
    if (response.status >= 400) {
      throw new Error("Bad response from server");
    }
    return response.json();
  })
  .then(function(data) {
    that.setState({ person: data.person });
  });
}

    Le rendu de la composante de la cartographie de l'état:

    const personLoc = Object.keys(this.state.person.loc).map((content, idx) => {
    const items = this.state.person.loc[content].map((item, i) => (
        <p key={i}>{item.text}</p>
    ))

    return <div key={idx}>{items}</div>
})
    Merci, cela a été très utile, je le configurer à l'aide de l'étendre, mais ensuite eu des problèmes avec l'auto de liaison j'ai donc mis en place un constructeur, mais maintenant, je suis pas Cannot read property 'bind' of undefined
    J'ai réussi à le faire fonctionner par la liaison et puis aussi l'ajout d'une vérification pour voir si l'état existe.

    OriginalL'auteur vijayst