将OData结果映射到组件中

问题描述 投票：0回答：2

我正在尝试使用OData服务的结果填写列表，我将以下Rest库添加到我的项目中：https://github.com/javorosas/react-native-rest-client

我创建了这样的客户端类：

 import RestClient from 'react-native-rest-client';

    export default class ServiceOrdersOData extends RestClient {
      constructor () {
           super('https://my000000.sapbydesign.com/sap/byd/odata/analytics/ds/Crmsoscb.svc', {
      headers: {

        Authorization: 'Basic X1NFSURPUjpJbmljaW8wMQ=='

      },
    });
  }
       getServiceOrdersOData () {
        // Send the url query as an object
        return this.GET('/Crmsoscb');

       }

    };

这工作得很好，现在在实际屏幕中我添加了一个按钮并处理了它的onPress事件。

CallOData(){

        const api = new ServiceOrdersOData();
        const odataValues = api.getServiceOrdersOData();
        console.log(odataValues);
    }

如果我检查控制台，我可以看到odataValues正在返回OData服务的所有记录，如果在浏览器中执行，则按以下格式输出：

{
    "d": {
        "results": [
            {
                "__metadata": {
                    "uri": "https://my000000.sapbydesign.com/sap/byd/odata/analytics/ds/Crmsoscb.svc/Crmsoscb('.7~0000000000011DDFBEA73CE3794B5D1A')",
                    "type": "CrmsoscbSvc.CrmsoscbType"
                },
                "ID": ".7~0000000000011DDFBEA73CE3794B5D1A",
                "C_DbaServiceOrg": "00000000-0001-1DDF-B9FF-7D69E6266BF2",
                "C_DicIncCataId": "0000000000000000010010000",
                "C_DicIncCatId": "0000000000000000010014172",
                "C_DocId": "00000000000000000000000000000000001",
                "C_DocPostDate": "/Date(1290729600000)/",
                "C_DocSAgCorLc": "3",
                "C_DocUuid": "00000000-0001-1DDF-BEA7-3CE3794B5D1A",
                "C_DpyBuyerCntry": "US",
                "C_DpyBuyerPoscd": "14204",
                "C_DpyBuyerPty": "00000000-0001-1DDF-BA84-90748A78DCE3",
                "C_DpyBuyerRegn": "NY",
                "C_DpyBuyAbc": "A",
                "C_DpyBuyCity": "Buffalo",
                "C_DpyBuyInds": "42",
                "C_DpyBuyIndscsy": "0005",
                "C_DpyBuyNieid": "",
                "C_DpyProcPty": "00000000-0001-1DEF-BAD7-B58B002BEC36",
                "C_DpySalesUnit": "00000000-0001-1DDF-B9FF-7D69E6266BF2",
                "C_DpySrvsupTeam": "00000000-0001-1DDF-B9FF-7D69E6266BF2",
                "C_DpySrvExTeam": "00000000-0001-1DDF-B9FF-7D69E6266BF2",
                "C_DpySrvPerform": "00000000-0001-1DEF-BAD7-B5BC90EE6C36",
                "C_DroMatProcCat": "00000000-0001-1DEF-BA9F-2DABDB415385",
                "C_DroMatProdTy": "1",
                "C_DroRefoIndmat": "00000000-0001-1DEF-BAEB-6DD8248A2BA6",
                "C_DroRefoMat": "00000000-0001-1DEF-BAEA-3DA13AD047A6",
                "C_DsrProcCataid": "0000000000000000010010000",
                "C_DsrProcCatid": "0000000000000000010014000",
                "C_DsrSrvPrior": "3",
                "C_DsrWarranty": null,
                "C_DttInitMonth": "--11",
                "C_DttInitQuartr": "--Q4",
                "C_DttInitRecDt": "/Date(1290729600000)/",
                "C_DttInitWeekdy": "5",
                "C_DttInitYear": "2010",
                "C_DttInitYrmon": "2010-11",
                "C_DttInitYrquar": "2010-Q4",
                "C_DttInitYrweek": "2010-W47",
                "T_DocName": "Combi 75: Below average heat output",
                "NodeId": "0000000000011DDFBEA73CE3794B5D1A",
                "Count": 1
            }
        ]
    }
}

我现在要做的是在屏幕上用这些记录填写一个列表，比方说T_DocName和C_DocId。

我知道一个名为map的函数，但我不知道在这种特殊情况下如何使用它。

在此先感谢您的帮助！

编辑：

所以我尝试了几个建议，但是当我尝试获取odataValues.d.results时它会给我以下错误：Cannot read property 'results' of undefined

我认为这与事实有关，即回复的回复不是一个集合，而是一个叫做Promise的东西？我附上了返回本身的console.log的截图：

Promise returned

正如你在那里看到的，有一个奇怪的结构，我的回答包含在：

_55:
d:{results: Array(291)}

有什么建议？

再次感谢！

reactjs react-native odata
2个回答
0
投票

[StartCaveat]

你需要看看地图的MDN：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map该网站有大量的信息适用于所有的javascript以及更多！

[EndCaveat]

要使用map，首先必须确保所需的结果位于数组中，您可以通过以下方式执行此操作：

if(typeof(odataValues.d.results) != "undefined"){
}

现在我们知道我们可以访问该值，事实上，它确实存在于我们可以使用map的范围内！

  odataValues.d.results.map(item => {
    console.log("DocName", item.T_DocName);
    console.log("CDocId", item.C_DocId);
   });

以上内容将写入控制台，包括t_DocName和C_DocId。但是我们需要在屏幕上显示这些数据。

为此，我们可以执行以下操作：

<FlatList
 data={this.state.dataToDisplay}
 renderItem={({item}) => <Text>{`T_Doc: ${item.T_DocName} C_Doc ${item.C_DocId}`}</Text>}
/>

但是等等，我们需要创建dataToDisplay和什么状态？

State是一个组件级全局容器，可以在类/函数内的任何位置访问。

要创建dataToDisplay，我们可以编辑您的函数。

 CallOData(){
    const api = new ServiceOrdersOData();
    const odataValues = api.getServiceOrdersOData();
    if(typeof(odataValues.d.results) != "undefined"){
      this.setState({dataToDisplay: odataValues.d.results.map(item => {
        DocName: item.T_DocName,
        DocId: item.C_DocId
        });
      });
    }
}

好的，我们的状态包含我们现在需要的值，只需将您的Flat列表添加到渲染中，检查数据即可完成！

render() {
        return (
          this.state.dataToDisplay && (<FlatList
            data={this.state.dataToDisplay}
            renderItem={({ item }) => <Text>{`T_Doc: ${item.DocName} C_Doc ${item.DocId}`}</Text>}
          />)
        )
      }

现在您应该在屏幕上看到您的数据！ yesssss

0
投票

所以你有这些odataValues，并且应该在收到它们时将它们保存到状态。然后，在渲染中，您可以像这样渲染结果：

return (
   <View> {/* not necessary, this is only a mock of the rest of your layout */}
     {this.state.odataValues.d.results.map(result => <ResultRenderer result={result} />)}
   </View>
 )

ResultRenderer应该是一个呈现它接收的道具的组件。

我在这里展示了如何映射值，因为这就是你所要求的。但是，更好的选择是使用FlatList，因为如果你有一个很长的子列表，它只会在屏幕上呈现这些，节省了不必要的处理。你这样使用它：

<FlatList
  data={this.state.odataValues.d.results}
  renderItem={result => <ResultRenderer />}
/>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.