react-native - 解析 JSON 以在 React Native 中建模变得未定义

Question

我正在尝试将我的 JSON 对象映射到这样的模型类：

export class Product {
constructor(props) {
    this.name = props.Name
    this.items = props.Items
    this.price = props.Price
    this.productID = props.ProductID 
    this.medias = props.Medias
  }
}

但是当我得到 JSON 并尝试解析到我的模型时，我收到以下错误

类型错误：未定义不是对象（评估“mostSoldProductsApiResponse.map”

这是我的解析代码：

const mostSoldProductsApiResponse = await mostSoldProductsApiCall.json().Products;
const arrayProducts = mostSoldProductsApiResponse.map(function(item) {
return new Product(item.Product)
            })

如果我不将 JSON 对象解析为new Product()构造函数，则代码可以正常工作。但我想组织代码。因此我想实现 Product 类。

标签： react-native

Answer 1

可能是您使用的await不是您所期望的。

该行await mostSoldProductsApiCall.json().Products实际上是首先返回一个承诺，然后对未定义await的结果承诺字段进行 ing，Products因为它不是承诺的结果。

相当于：

const promise = mostSoldProductsApiCall.json()    // this is the promise
const unresolvedProducts = promise.Products       // this is undefined
const mostSoldProductsApiResponse = await unresolvedProducts  // this resolves to undefined

解决方案

await在实际的承诺上使用括号，如下所示：

const mostSoldProductsApiResponse = (await mostSoldProductsApiCall.json()).Products

另外一个选项：

const mostSoldProductsApiResponse = await mostSoldProductsApiCall.json()
const arrayProducts = mostSoldProductsApiResponse.Products.map(function(item) {
  return new Product(item.Product)
})

希望这可以帮助！