Simple - Réagir et OData

Question

Je suis complètement nouveau à Réagir et j'ai du mal à le comprendre.

J'ai été chargé de créer une extraction d'API très simple vers un point de terminaison OData.

Maintenant, je suis venu dans cette bibliothèque https://www.npmjs.com/package/react-odata

Ce qui est fantastique! Cependant, je ne comprends tout simplement pas comment faire fonctionner quelque chose comme ça.

Je comprends les principes de base du fonctionnement de la réaction et j'ai suivi de nombreux tutoriels de base. Mais pour une raison quelconque, je n'arrive pas à comprendre ce que je veux dire. Comment puis-je utiliser cette bibliothèque pour interroger simplement un point de terminaison OData et afficher les données brutes?

Answer 1

Il semble que le paquet que vous avez lié exposerait un composant React que vous utiliseriez pour envelopper vos propres composants afin que vous ayez accès aux données récupérées et que vous puissiez les transmettre en tant que propriétés. Au moins c'est ce que je comprends de son README.

J'imagine que ce serait quelque chose comme ceci:

<OData baseUrl={baseUrl} query={query}> 
    { ({ loading, error, data }) => (
    <div> 
     <YourComponent data={data} /> 
    </div> 
)} 
</OData> 

Cela utiliserait réagir-OData, mais vous n'avez pas besoin ce paquet pour faire ce que vous voulez. Vous pouvez simplement faire un appel AJAX régulier sur l'URL et alimenter vos composants avec les données renvoyées.

Ce poste peut aider: http://andrewhfarmer.com/react-ajax-best-practices/

Answer 2

Ainsi, le problème avec cela, est que je ne comprenais pas que je dois encore faire explicitement l'appel et renvoyer les données de cela.

import React, { Component } from 'react'; 
import Fetch from 'react-fetch-component'; 
import OData from 'react-odata'; 

const baseUrl = 'http://services.odata.org/V4/TripPinService/People'; 
const query = { filter: { FirstName: 'Russell' } }; 

export default class App extends Component { 
    render() { 
    return (
     <div> 
     <h1>Basic</h1> 
     <OData baseUrl={baseUrl} query={query}> 
      {({ loading, data, error }) => (
      <div> 
       {loading && <span>Loading... (()=>{console.log(loading)}) </span>} 
       {data && data.value.map((d, i) => <div key={i} id={i}>{d.FirstName}</div>)} 
      </div> 
     )} 
     </OData>   
     </div> 
    ); 
    } 

    /* Setup consistent fetch responses */ 
    componentWillMount() { 
    fetch('http://services.odata.org/V4/TripPinService/People') 
     .then((response) => response.json()) 
     .then((responseJson) => { 
      return responseJson.value[0].FirstName 
     }) 
     .catch((error) => {console.error(error)}); 

    } 
} 

du lien donné dans la question que je trouve que ce composant a utilisé le composant réagit-fetch comme base pour faire l'appel.