lodash 函数不 return 单个对象

Question

我在 React 应用程序中使用 lodash 映射函数来处理作为服务器响应返回的对象数组。当响应确实是一个对象数组时，这很有效。有时虽然响应只是一个对象。在那种情况下，我的代码不起作用。

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"
              }
           }
        }
     }
  }
 }

}

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

{  
   "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/zAAMQAtADAAMAAwADgAAAACewMxADcAMg==9;4258681780;"
                 },
                 "Item_No":{  
                    "_text":"01-0008"
                 },
                 "Code":{  
                    "_text":"172"
                 },
                 "Description_2":{  
                    "_text":"ΜΠΛΕ"
                 },
                 "GrossRequirement":{  
                    "_text":"0"
                 },
                 "ScheduledRcpt":{  
                    "_text":"0"
                 },
                 "ExpectedRcptDate":{  
                    "_text":"0001-01-01"
                 },
                 "Inventory":{  
                    "_text":"41.1"
                 },
                 "ProjAvailBalance":{  
                    "_text":"41.1"
                 }
              },
              {  
                 "Key":{  
                    "_text":"44;GRUAAAJ7/zAAMQAtADAAMAAwADgAAAACewM2ADIAOA==9;4258681790;"
                 },
                 "Item_No":{  
                    "_text":"01-0008"
                 },
                 "Code":{  
                    "_text":"628"
                 },
                 "Description_2":{  
                    "_text":"ΧΡΥΣΟ"
                 },
                 "GrossRequirement":{  
                    "_text":"0"
                 },
                 "ScheduledRcpt":{  
                    "_text":"0"
                 },
                 "ExpectedRcptDate":{  
                    "_text":"0001-01-01"
                 },
                 "Inventory":{  
                    "_text":"40.2"
                 },
                 "ProjAvailBalance":{  
                    "_text":"40.2"
                 }
              },
              {  
                 "Key":{  
                    "_text":"44;GRUAAAJ7/zAAMQAtADAAMAAwADgAAAACewM3ADAAMw==9;4258681800;"
                 },
                 "Item_No":{  
                    "_text":"01-0008"
                 },
                 "Code":{  
                    "_text":"703"
                 },
                 "Description_2":{  
                    "_text":"ΓΚΡΕΝΑ"
                 },
                 "GrossRequirement":{  
                    "_text":"0"
                 },
                 "ScheduledRcpt":{  
                    "_text":"0"
                 },
                 "ExpectedRcptDate":{  
                    "_text":"0001-01-01"
                 },
                 "Inventory":{  
                    "_text":"34.1"
                 },
                 "ProjAvailBalance":{  
                    "_text":"34.1"
                 }
              }
           ]
        }
     }
  }
 }
}

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

Answer 1

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

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

更好的是，您可以在更新状态之前检查和预处理您的服务器响应，以确保state.data只存储数组，而不管响应中的项目数。

Answer 2

您可以使用 isArray 方法。

有一个 native one in the Array object or you can use the 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 && _.get(data, ['Soap:Envelope', 'Soap:Body', 'ReadMultiple_Result', 'ReadMultiple_Result', 'ItemCharacteristics']);
const simplifiedDataArray = _.castArray(simplifiedData);

lodash 函数不 return 单个对象

lodash function does not return a single object

javascript

reactjs

lodash

map-function