2017-10-09 6 views
0

Je veux récupérer une donnée d'api de repos dans la table de réaction. Comment puis-je définir les données de ligne dans la table de réaction à partir de la valeur obtenue dans componentDidMount()?Existe-t-il un moyen d'extraire l'API pour réagir à la table dans réagissez js?

Après mon code exemple:

constructor() { 
    super(); 
    this.state = { 
    data: [], 
    } 
} 
componentDidMount() { 
    fetch('https://facebook.github.io/react-native/movies.json').then((Response) => Response.json()). 
    then((findresponse) => { 
    console.log(findresponse.movies) 
    this.setState({ 
     data: findresponse.movies 
    }) 
    }) 
} 


render() { 
    this.state.data.map((dynamicData, key) => { 
     const data = [{ 
      name: { 
      this.dynaimcData.title 
      }, 
      age: { 
      this.dynamicData.releaseYear 
      }] 
     }) 

    const columns = [{ 
     Header: 'Name', 
     accessor: 'name' 
     }, 
     { 
     Header: 'Age', 
     accessor: 'age' 
     } 
    ] 

    return (<ReactTable data: {data} column: {columns}/>) 
    }) 
} 
+1

Doit-on 'data: {data}' ne pas être 'data = {data}'? – Rajesh

+0

et 'this.state.data.map ((dynamicData, key) => {...}' devrait être à l'intérieur de return Vous n'avez pas écrit d'instruction return dans le rendu –

Répondre

0

On dirait qu'il ya une erreur de syntaxe dans ce domaine.

Pouvez-vous utiliser <ReactTable data={data} column={columns} /> et voir si cela fonctionne?

+0

Nous ne devrions pas répondre aux erreurs de typo. option pour fermer la question, que vous recevrez une fois que vous avez assez de rep. Mais d'ici là, je vous demanderais d'attendre un peu. Bientôt vous aurez le droit de commenter.Utilisez cela pour une telle question à la place. – Rajesh

1

Enfin trouvé la réponse ... mais je n'ai pas utilisé la table de réaction ... Je n'ai pas pu trouver la réponse pour cela .. Au lieu de cela j'ai utilisé la table Html ordinaire .. Ce n'est pas la bonne réponse pour ma question .. mais étant donné que ce sera utile pour quelqu'un que je poste cette réponse ...

constructor() { 
    super(); 
    this.state = { 
     data: [], 
    } 
} 
componentDidMount() { 
    fetch('https://facebook.github.io/react-native/movies.json').then((Response) => Response.json()). 
      then((findresponse) => 
      { 
       console.log(findresponse.movies) 
       this.setState({ 
        data: findresponse.movies 
       }) 
      }) 
} 
render() 
{ 


    return(
      <table className="tat"> 
    <tr><th>name</th><th>year</th></tr> 
     { 
       this.state.data.map((dynamicData) => 
      <tr className="trow"> <td> {dynamicData.title} 
     </td> <td> {dynamicData.releaseYear} </td> 
           </tr> 
           ) } 
         </table> 


      ) 
} 

sortie:

Output for fetching api values inside table

Je n'ai pas pu setstate dans la table React mais ici, il est un peu facile de définir l'API pour les données de la table un éclairé C'est plus facile puisque c'est complètement défini par nous. J'ai donc défini une structure par défaut pour la table puis, en utilisant la fonction de mappage de données, j'insère dynamiquement les valeurs dans la ligne du tableau. Donc, c'est aussi utile pour créer une quantité dynamique de lignes selon les besoins. Le seul inconvénient de l'utilisation de la table HTML est que nous devons définir les autres fonctionnalités du tri des tables, mais dans la table React, des fonctionnalités prédéfinies peuvent être utilisées.

Si quelqu'un pouvait donner la réponse pour aller chercher les valeurs de l'API à l'intérieur de la table React, ce serait plus utile.

Merci.