Просто - реагируй и OData

Question

Я совершенно новичок в React и с трудом понимаю это.

Мне было поручено создать действительно простую выборку API для конечной точки OData.

Теперь я наткнулся на эту библиотеку https://www.npmjs.com/package/react-odata

Который выглядит фантастически! Однако я просто не понимаю, как заставить что-то подобное работать.

Я понимаю самые основные принципы того, как реагирует, и прошел много основных уроков. Но по какой-то причине я не могу разобраться с этим.

Так как же использовать эту библиотеку для простого запроса конечной точки OData и отображения необработанных данных?

Answer 1

Так что проблема в том, что я не понял, что мне все еще нужно явно сделать вызов и вернуть данные из этого.

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)});

  }
}

Исходя из указанной ссылки в вопросе, я обнаружил, что этот компонент использовал компонент Reaction-fetch в качестве базы для выполнения вызова.

Answer 2

Похоже, что пакет, который вы связали, будет представлять компонент React, который вы будете использовать для упаковки своих собственных компонентов, чтобы иметь доступ к извлеченным данным и передавать их в виде свойств. По крайней мере, это то, что я понимаю из его README.

Я предполагаю, что это будет что-то вроде этого:

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

Это будет использовать response-odata, но вам не нужен этот пакет, чтобы делать то, что вы хотите. Вы можете просто сделать обычный AJAX-вызов по URL и передать свои компоненты возвращенным данным.

Этот пост может помочь: http://andrewhfarmer.com/react-ajax-best-practices/