简单-React和OData [英] Simple - React and OData

问题描述

我是React的新手，很难理解它.

I'm completely new to React and having a hard time understanding it.

我的任务是为OData端点创建一个非常简单的API提取.

I've been tasked with creating a really simple API fetch to an OData endpoint.

现在，我遇到了这个库 https://www.npmjs.com/包/反应数据

Now, I've come across this library https://www.npmjs.com/package/react-odata

哪个看起来棒极了！但是，我只是不明白如何使这种工作正常进行.

Which looks fantastic! However I just do not understand how to even get something like this working.

我了解反应的基本原理，并阅读了许多基本教程.但是无论出于什么原因，我都无法理解这一点.

I understand the very basic principles of how react works and have gone through many basic tutorials. But for whatever reason I can not get my head around this one.

那么我该如何使用该库简单地查询OData端点并显示原始数据?

So how could I use this library to simply query an OData endpoint and display the raw data?

推荐答案

所以问题在于，我不知道我仍然必须显式进行调用并从中返回数据.

So the issue with this, is that I didn't understand that I still have to explicitly make the call and return the data from that.

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

  }
}

在问题的给定链接中，我发现该组件使用react-fetch-component作为进行调用的基础.

from the given link in the question I found that this component used the react-fetch-component as a base to make the call.

这篇关于简单-React和OData的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！