时间戳

首页 > 解决方案 > 在 react-native 中使用 odata

react-native - 在 react-native 中使用 odata

问题描述

我正在尝试在一个小的 react-native 测试应用程序中使用 odata 库，但是当数据返回时列表没有填满。

const CONST_REST_WS_HOST = "DELETED";
const CONST_REST_WS_URL = "http:" + "//" + CONST_REST_WS_HOST + "/odata/";

var o = require('odata');

class Feed extends Component {

  [EDIT - Added in setup of initial state
  constructor(props) {
    super(props);
    this.state = { products: null };
  }

  [EDIT - Added in part loading the data]
  componentWillMount() {
    this.oProductHandler = o(CONST_REST_WS_URL + 'Products');
    this.oProductHandler.take(20).get(function (data) {
      this.setState({ products: data });
    }.bind(this));
  }

  render() {
    return (
      <ScrollView>
        <List>
          <ListItem key="1" title="Sample Item" /> // THIS APPEARS IN LIST
          {
            this.state && this.state.products && this.state.products.map((item) => {
              console.log(item.ItemCode); // THIS STUFF APPEARS
              <ListItem
                key={item.ProductId}   // I DON'T SEE THESE THINGS
                title={item.ItemCode}
              />
            })
          }
        </List>
      </ScrollView>
    );
  }
}

编辑 - 在 package.json 的部分添加

"odata": "^0.4.0",
"odata-query": "5.0.0",
"react": "16.3.1",
"react-dom": "16.3.0",
"react-native": "0.55.4",
"react-native-elements": "^0.18.5",

在视图中，我看到了列表，并且看到了第一个列表项“示例项”。我还看到了控制台中的项目。数据服务正在运行，我自己构建了它，它正在其他项目中运行。它也在这个项目中工作，因为我可以在控制台中看到项目代码。那么当 item.ItemCode 出现在控制台中时，为什么它们没有出现在列表中呢？对状态变化的反应是否在不同的环境中运行？我已经环顾了几天，他们似乎都遵循这种模式.. 填写数据，setState，重新运行渲染并填充组件。所有这些似乎都在工作，否则日志将为空。那么这里给出了什么？ 编辑添加了更多代码和这些细节 我添加了评论中要求的更多项目和包装信息，以防万一版本发挥作用。这段代码现在是整个类，仅此而已。我还尝试将 ScrollView 和 List 放入条件 if (this.state && this.state.products) { 以便列表和列表项位于同一

麦克风

标签： react-nativeodata

解决方案

我认为您只需要在地图闭包中添加 return ：

{
        this.state && this.state.products && this.state.products.map((item) => {
          console.log(item.ItemCode); // THIS STUFF APPEARS
          return (<ListItem
            key={item.ProductId}   // I DON'T SEE THESE THINGS
            title={item.ItemCode}
          />);
        })
}

推荐阅读