Reactjs 简单反应与OData

我对反应完全陌生，很难理解

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

现在，我偶然发现了这个图书馆

看起来棒极了！然而，我只是不明白如何才能让这样的东西发挥作用

我了解react工作原理的基本原理，并且已经学习了许多基本教程。但无论出于什么原因，我都无法理解这一点

---

那么，我如何使用这个库来简单地查询OData端点并显示原始数据呢？

您链接的包似乎会公开一个React组件，您可以使用该组件包装自己的组件，这样您就可以访问所获取的数据并将其作为属性传递下去。至少我从自述中了解到了这一点

我想应该是这样的：

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

{（{加载，错误，数据}）=>(
)}

这将使用react-odata，但您不需要该包来完成您想要的任务。您可以对URL进行常规AJAX调用，并向组件提供返回的数据

---

这篇文章可能会有所帮助：

所以这篇文章的问题是，我不明白我仍然需要明确地打电话并从中返回数据

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

  }
}

import React，{Component}来自'React'；
从“反应提取组件”导入提取；
从“反应OData”导入OData；
常量baseUrl=http://services.odata.org/V4/TripPinService/People';
const query={filter:{FirstName:'Russell'}}；
导出默认类应用程序扩展组件{
render（）{
返回(
基本的
{（{加载，数据，错误}）=>(
{loading&&loading…（（）=>{console.log（loading）}
{data&&data.value.map（（d，i）=>{d.FirstName}）
)}
);
}
/*设置一致的获取响应*/
组件willmount（）{
取（'http://services.odata.org/V4/TripPinService/People')
.then（（response）=>response.json（））
.然后（（responseJson）=>{
返回responseJson.value[0]。FirstName
})
.catch（（错误）=>{console.error（错误）}）；
}
}

---

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

嘿，谢谢您的回复！我已经开始工作了。因此，使用OData组件背后的想法是构建OData查询。我知道这有点陈旧，但我希望您能注意到。我对你是如何让它工作的很感兴趣。我正试着让同样的事情继续下去，但解决办法我却找不到。