从异步调用加载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屋!