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

Загрузить react-native список из асинхронного вызова


Я учусь реагировать-родной язык. Я пытаюсь отобразить действительно простой список продуктов из вызова базы данных. Данные загружаются, но по какой-то причине отдельные элементы не загружаются в список.

Что я уже пробовал:

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

const CONST_REST_WS_HOST = "[PRIVATE DOMAIN]";
const CONST_REST_WS_URL = "http:" + "//" + CONST_REST_WS_HOST + "/odata/";

var o = require('odata');

class Feed extends Component {
   oProductHandler = null;

   constructor(props) {
      super(props);
      this.state = { products: [] };
   }

   componentWillMount() {
      this.oProductHandler = o(CONST_REST_WS_URL + 'Products');
      this.oProductHandler.get(function (data) {
         this.setState( {products: data} );
      }.bind(this));
   }

   render() {
      return (
         <ScrollView>
            <List>
            {
               this.state 
                 && this.state.products 
                 && this.state.products.map((item) => {
                  console.log(item.ItemCode); // THIS APPEARS IN THE LOG
                  <ListItem
                     key={item.ProductId}
                     title={item.ItemCode}
                  />
               })
            }
            </List>
         </ScrollView>
      );
   }
}

export default Feed;

O = require('odata'); исходит из npm службы OData.
Служба odata работает. Я написал его сам, я использовал его в других проектах, и я могу получить данные в браузере.
Я вижу ItemCode в журнале, поэтому я знаю, что данные поступают, но по какой-то причине элементы <ListItem ... /> не добавляются в список. Я вижу сам " список../", и в нем, похоже, есть один пустой элемент.
Когда что-то выполняется подобным образом в результате вызова базы данных, создаются ли элементы в другом контексте? В чем причина того, что <ListItem /> не может найти <List .../>?

ТИА, Майк

1 Ответов

Рейтинг:
2

Mike V Baker

Так что получается, что это была просто проблема использования фигурных скобок {} там, где я должен был использовать parens ()

render() {
   return (
      <ScrollView>
         <List>
         {
            this.state
              && this.state.products
              && this.state.products.map((item) => ( // THIS PAREN INSTEAD OF BRACE
               <ListItem
                  key={item.ProductId}
                  title={item.ItemCode}
               />) // SAME HERE
              )
         }
         </List>
      </ScrollView>
   );