简单 - React 和 OData

Question

我对 React 完全陌生，很难理解它。

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

现在，我遇到了这个库https://www.npmjs.com/package/react-odata

看起来棒极了！但是，我只是不明白如何让这样的事情发挥作用。

我了解 React 工作原理的基本原理，并学习了许多基础教程。但无论出于何种原因，我都无法理解这一点。

那么我如何使用这个库来简单地查询 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)});

  }
}

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

Answer 2

您链接的包似乎会公开一个 React 组件，您可以使用该组件来包装自己的组件，以便您可以访问获取的数据并将其作为属性传递。至少这是我从它的 README 中理解的。

我想它会是这样的：

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

这将使用 react-odata，但你不需要那个包来做你想做的事。您可以只对 URL 进行常规 AJAX 调用，然后将返回的数据提供给您的组件。

这篇文章可能会有所帮助：http://andrewhfarmer.com/react-ajax-best-practices/