Reactjs 将OData结果映射到组件中

我试图用OData服务的结果填写一个列表，我在我的项目中添加了以下Rest库：

我创建的客户端类如下所示：

 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时，它会给我以下错误：

无法读取未定义的属性“results”

我相信这与这样一个事实有关，即回复的不是收藏，而是所谓的承诺？我附上了一个返回的console.log本身的屏幕截图：

如你所见，这里有一个奇怪的结构，我的回答包含在下面：

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

有什么建议吗

---

再次感谢

所以您有这些ODataValue，并且可能应该在收到它们时将它们保存到state。然后，在“渲染”中，可以按如下方式渲染结果：

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>
 )

返回(
{/*没有必要，这只是对布局其余部分的模拟*/}
{this.state.odataValues.d.results.map（result=>）}
)

ResultTrender应该是一个组件，用于呈现它接收到的道具

我在这里演示如何映射这些值，因为这是您所要求的。然而，一个更好的选择是使用平面列表，因为如果您有一个很长的子列表，它将只在屏幕上呈现这些子列表，节省不必要的处理。你这样使用它：

<FlatList
  data={this.state.odataValues.d.results}
  renderItem={result => <ResultRenderer />}
/>

}
/>

[StartCaveat]

您需要看看MDN for map：该站点有大量关于所有javascript和其他内容的信息

[结束警告]

若要使用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>}
/>

太好了，我们有一个包含我们需要的值的状态，现在只需将平面列表添加到渲染中，检查数据，您就完成了

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

render（）{
返回(
this.state.dataToDisplay&（{T_Doc:${item.DocName}C_Doc${item.DocId}`}
/>)
)
}

---

现在你应该可以在屏幕上看到你的数据了！是的，这个答案包括很多假设的引导。例如，您根本不知道用户有状态。你已经假设了，这也不能从他们的代码片段中暗示出来。您似乎还假设他们将能够创建一个显示文本的辅助组件。你似乎还假设odataValues总是会有结果，而那些结果总是会有孩子。我不是假设他有状态。他必须保存一些数据，并且应该使用state来保存。此外，他也不会“无法”创建辅助组件，我通过辅助组件对其进行解释只是因为它提高了可读性。然而，这很容易被其他任何东西所取代。最后，当然，生产应用程序应该对输入进行消毒。然而，这不是问题的重点，没有理由用这些东西来让答案过于复杂。谢谢你的反馈，伙计，我刚刚用我发现的一些东西更新了帖子，你能给我一些见解吗？谢谢

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