Mike V Baker Ответов: 1

Как я могу обрабатывать результаты react-odata?


Я работаю над прототипом react-native и пытаюсь представить react-odata.
https://www.npmjs.com/package/react-odata имеет следующий пример кода в файле readme:

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>

То, что я ищу, - это то, что нужно поместить в пробелы /* handle 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://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-устройстве). Я проверил URL-адрес, и он действителен (я уже довольно давно использую его в других проектах). Я также проверил URL - адрес через chrome на устройстве, и он работает.
Часть, которая мне не ясна, заключается в том, как структурировать каждый из ответов на "загрузку", "ошибку" и "данные". Я попробовал то, что вы видите здесь с функцией(data) {//function body}, Я также попробовал анонимные функции, такие как () => ({//function body}), я попробовал функцию(data) и (data) сам по себе.
Я пытался ставить в <смотреть> В разных местах, внутри функции 'данные', за пределами &ЛТ;службы&ГТ;. Это либо создает синтаксическую ошибку, либо я просто получаю пустое представление.

Кто-нибудь там когда-нибудь использовал библиотеку react-odata или что-то еще с подобной структурой и знал правильный способ борьбы с ними?

ТИА, Майк

1 Ответов

Рейтинг:
0

Mike V Baker

Как оказалось, вызов odata был просто прекрасен, это был синтаксис listitems, который был неправильным

{ data && { function(data) ( // PAREN HERE
    <ListItem title="data" rightTitle={data} /> ) // AND HERE
} }
Заменил скобки и поставил вместо них парены.