JS map函数不返回单个对象

时间:2019-01-23 08:19:54

标签: javascript reactjs map-function

我在react应用程序中使用JS映射函数,以便处理作为服务器响应返回的对象数组。当响应确实是对象数组时,这种方法很好用。有时,尽管响应只是一个对象。在这种情况下,我的代码不起作用。

public void ThenTheResultShouldBeOnTheScreen()
{
    Test test = new Test() // initialize new instance of class
    test.CheckLoginPage()  // call method
}

以下是单个对象响应的示例:

render(){
    const { data } = this.state;
    const simplifiedData = data && _.get(data, ['Soap:Envelope', 'Soap:Body', 'ReadMultiple_Result', 'ReadMultiple_Result', 'ItemCharacteristics']);
    const beautifiedData = _.map(simplifiedData, simple => _.reduce(simple, (r, value, key) => ({
        ...r,
        [key]: value['_text']
      }), {}));

        return (
            <div>
                {
                    beautifiedData.map((product, i) => {
                        return (
                                <ItemDetailsCard
                                    key={i}
                                    itemNo={product.Item_No}
                                    code={product.Code}
                                    Description_2={product.Description_2}
                                    GrossRequirement={product.GrossRequirement}
                                    ScheduledRcpt={product.ScheduledRcpt}
                                    ExpectedDate={product.ExpectedRcptDate}
                                    Inventory={product.Inventory}
                                    ProjAvailBalance={product.ProjAvailBalance}
                                />


                        );
                    })
                }

}

以及对象响应数组的示例:

{  
   "Soap:Envelope":{  
  "_attributes":{  
     "xmlns:Soap":"http://schemas.xmlsoap.org/soap/envelope/"
  },
  "Soap:Body":{  
     "ReadMultiple_Result":{  
        "_attributes":{  
           "xmlns":"urn:microsoft-dynamics-schemas/page/itemcharacteristics"
        },
        "ReadMultiple_Result":{  
           "ItemCharacteristics":{  
              "Key":{  
                 "_text":"44;GRUAAAJ7/zAAMQAtADAAMAAxADUAAAACewMwADUAMQ==9;4258681930;"
              },
              "Item_No":{  
                 "_text":"01-0015"
              },
              "Code":{  
                 "_text":"051"
              },
              "Description_2":{  
                 "_text":"ΜΑΥΡΟ"
              },
              "GrossRequirement":{  
                 "_text":"0"
              },
              "ScheduledRcpt":{  
                 "_text":"0"
              },
              "ExpectedRcptDate":{  
                 "_text":"0001-01-01"
              },
              "Inventory":{  
                 "_text":"0"
              },
              "ProjAvailBalance":{  
                 "_text":"0"
              }
           }
        }
     }
  }
 }

有人可以提供处理单个对象响应的逻辑吗?

2 个答案:

答案 0 :(得分:1)

似乎您在代码中使用lodash,因为我看到您使用下划线表达式。在这种情况下,请尝试在状态数据上使用_.castArray,以确保始终在渲染中使用数组:

const beautifiedData = _.map(_.castArray(simplifiedData), simple => _.reduce(simple, (r, value, key) => ({
    ...r,
    [key]: value['_text']
}), {}));

更好的是,您可以在更新状态之前检查并预处理服务器响应,以确保state.data仅存储阵列,而不管响应的项目​​数如何。

答案 1 :(得分:1)

您可以使用isArray方法。

Array对象中有一个native one,或者您可以使用Lodash one,因为您正在使用它。

const simplifiedData = data && _.get(data, ['Soap:Envelope', 'Soap:Body', 'ReadMultiple_Result', 'ReadMultiple_Result', 'ItemCharacteristics']);
const simplifiedDataArray = Array.isArray(simplifiedData) ? simplifiedData  : [simplifiedData]
// or in Lodash
// const simplifiedDataArray = _.isArray(simplifiedData) ? simplifiedData  : [simplifiedData]

如果您想采用Lodash的方式,尽管有一种方法可以做到这一点,即castArray会将传递给它的所有内容包装到一个数组中(如果尚未存储的话)。

const simplifiedData = data && _.castArray(_.get(data, ['Soap:Envelope', 'Soap:Body', 'ReadMultiple_Result', 'ReadMultiple_Result', 'ItemCharacteristics']));