Question

几天来我一直在寻找如何做到这一点。即将结束，但其中未包含解决方案。我正在开发一个react-native应用程序，试图查看react-odata是否可以简化数据库交互。从他们的自述文件中：

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

<OData baseUrl={baseUrl} query={query}>
  { ({ loading, error, data }) => (
    <div>
      { loading && {/* handle loading here */} }
      { error && {/* handle error here */} }
      { data && {/* handle data here */}}
    </div>
  )}
</OData>

我需要知道的是如何处理{/ *这里的xxx * /}区域中的响应。我已经尝试了好几个小时了。我最新的东西是这个

import React, { Component } from 'react';
import {
  Text,
  View,
  ScrollView
} from 'react-native';
import { List, ListItem } from 'react-native-elements';

import OData from 'react-odata';
const baseUrl = 'http://PRIVATE/odata/Products';
// according to the code in odata.js we use false to send no options
// I also tried using { filter: { ProductId: 1 } };
// I also tried using { filter: { ProductId: '1' } };
const query = false;

class ProductList extends Component {
  onLearnMore = (user) => {
    this.props.navigation.navigate('Details', { ...user });
  };

  render() {
    return (
      <ScrollView>
        <OData baseUrl={baseUrl} query={query}>
          {({ loading, error, data }) => (
            <View style={{ height: 400 }}>
              <Text>HI THERE!!</Text>
              {loading && <Text>Loading...</Text>}
              {error && <Text>error...</Text>}
              {data &&
                <List>
                  <ListItem
                    key="1234"
                    title="Sample Item" />
                  <ListItem
                    key="1235"
                    title="Smaple Item 2" />
                  {data.map((product) => (
                    <ListItem
                      key={product.ProductId}
                      title={`${product.ItemCode}`}
                    />
                  ))}
                </List>
              }
            </View>
          )}
        </OData>
      </ScrollView>
    );
  }
}

export default Feed;

我可以在视图中看到HI THERE，所以我知道我们正在经过那个地点。我已启用实时调试并设置了断点。我看到'loading'项设置为null，但是即使断点停了3次，其他两个仍未定义。正如我所提到的，这确实出现在另一篇帖子simple-react-and-odata中。有一次它提到需要添加提取，所以我添加了一个...

componentWillMount() {
   alert('fetching');
   fetch(baseUrl)
      .then((response) => response.json())
      .then((responseJson) => {
         alert('returned ' + responseJson.value[0].ItemCode);
         return responseJson.value
      })
      .catch((error) => { console.error(error) });
}

当我运行此代码并使用实时调试时，我可以在源代码中设置一个断点，并且可以看到responseJson具有应该具有的所有4729项。但这当然是一种获取，它与声明式创建的OData对象无关。我看不出它将如何将获取与OData连接起来。

那么谁知道这个秘密？是否有人使用此方法，还是有一个更好的针对本地项目的odata解决方案？

TIA，迈克

如何使用react-odata

0 个答案: