从异步调用加载react-native列表 [英] Load react-native list from async call

问题描述

我学习反应原生。我正试图从数据库调用中显示一个非常简单的产品列表。数据正在加载，但由于某种原因，单个项目没有被加载到列表中。



我尝试过：

I learning react-native. I'm trying to display a really simple list of products from a database call. The data is loading but for some reason the individual items are not being loaded into the list.

What I have tried:

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 ... />项目未添加到列表中。我可以看到< List ../>本身并且它似乎只有一个空白项目。

当数据库调用导致某些内容运行时，是否在不同的上下文中创建了项目？ < ListItem />的原因是什么？没有找到< List ... />？



TIA，Mike

The o = require('odata'); is from npm odata.
The odata service works. I wrote it myself, I've used it in other projects, and I can get data in the browser.
I can see the ItemCode in the log so I know the data is getting in but for some reason the <ListItem ... /> items are not being added to the list. I can see the <List ../> itself and it appears to have a single blank item.
When something runs like this as a result of a database call, are the items being created in a different context? What's the reason for the <ListItem /> not to find the <List .../>?

TIA, Mike

推荐答案

事实证明这只是使用大括号的问题{ }我应该使用parens（）

So it turns out that it was just a problem of using braces {} where I should have used 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>
   );

这篇关于从异步调用加载react-native列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！