我如何处理react-odata的结果？ [英] How do I handle results from react-odata?

问题描述

我正在研究一个原子反应原型并尝试引入react-odata。

https://www.npmjs.com/package/react-odata有以下示例代码自述文件：

I'm working on a react-native prototype and trying to introduce react-odata.
https://www.npmjs.com/package/react-odata has the following sample code in the readme file:

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 * /。我意识到它正在使用lambda（箭头）函数对对象进行解构，但是我无法构建对这三个选项中的每一个的响应。



什么我试过了：

What I'm looking for is what to put in the spaces /* handle xxx here */. I realize it's destructuring the object with a lambda (arrow) function, but I'm having trouble constructing a response to each of the three options.

What I have tried:

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://HIDDEN_URL.elasticbeanstalk.com/odata/Products';
const query = false;
// checked query param down inside odata.js, use 'false' for no filter
// also tried { filter: { ProductId: 1 } };
// also tried { filter: { ProductId: '1' } };

render() {
  return (
    <ScrollView>
      <OData baseUrl={baseUrl} query={query}>
          { ({ loading, error, data }) => (
            <View style={{ height: 400 }}>
              <Text>HI THERE!!</Text> <==I can see this in the view
              { loading && {function() { 
                <Text>Loading...</Text>}
              } }
              { error && {function() { 
                <Text>error...</Text>}
              } }
              { data && { function(data) {
                 <ListItem title="data" rightTitle={data} /> }
              } }
            </View>
          )}
       </OData>

我还没有完成跟踪网络流量的步骤，看看呼叫是否已经退出并返回（我在Android设备上）我检查了网址，而且是v alid（我在其他项目中已经使用了很长一段时间）。我还通过设备上的chrome检查了URL并且它正在工作。

我不清楚的部分是如何构建每个响应'loading'，'error'和'数据'。我尝试了你在这里看到的函数（数据）{//函数体}，我也尝试了匿名函数，如（）=> （{//函数体}），我自己尝试了函数（数据）和（数据）。

我试过把< view>在数据功能内的不同地方，在< odata>之外。它要么创建一个语法错误，要么我得到一个空视图。



任何人都曾使用react-odata库或类似结构的其他东西并知道正确处理这些问题的方法是什么？



TIA，Mike

I haven't gone through the step of tracing the network traffic to see the call go out and return yet (I'm on an Android device). I've checked the URL and it's valid (I've been using it for quite a while in other projects). I've also checked the URL via chrome on the device and it's working.
The part that's not clear to me is how to structure each of the responses to 'loading', 'error', and 'data'. I tried what you see here with the function(data) {//function body}, I also tried anonymous functions such as () => ({//function body}), I tried function(data) and (data) by itself.
I tried putting the <view> in different places, inside the 'data' function, outside the <odata>. It either creates a syntax error or I just get an empty view.

Anyone out there ever use the react-odata library or something else with a similar structure and know the correct way to deal with these?

TIA, Mike

推荐答案

事实证明odata很好，这是列表项的语法错了

As it turns out the call to odata was just fine, it was the syntax of the listitems that was wrong

{ data && { function(data) ( // PAREN HERE
    <ListItem title="data" rightTitle={data} /> ) // AND HERE
} }

将大括号切出而是放入parens。

Switched the braces out and put in parens instead.

这篇关于我如何处理react-odata的结果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！