如何简化反应js中的状态长度

Posted 2023-02-22

【中文标题】如何简化反应js中的状态长度

【英文标题】：how to simplify the length of the state in react js

【发布时间】：2021-11-03 05:06:42

【问题描述】：

import  OrderSummary  from "@/services/order/data";

以下是我的状态声明

let [orderSummary, setOrderSummary] = useState<OrderSummaryResponse>(
    Id: 0,
    TableId: 0,
    TableName: '',
    MerchantId: 0,
    StoreId: 0,
    StoreName: '',
    BrandName: '',
    IsUnifyQR: false,
    Discount: 0,
    ServiceCharge: 0,
    GST: 0,
    RoundingAdjustment: 0,
    TotalAmount: 0,
    SubTotalAmount: 0,
    ServiceChargeAmount: 0,
    GSTAmount: 0,
    CreatedAt: '',
    Items: [
        
            MerchantId: 0,
            StoreId: 0,
            StoreName: '',
            ItemId: 0,
            ProductId: 0,
            ProductName: '',
            TotalAmount: 0,
            Quantity: 0,
            Note: '',
            Choices: [
                
                    OptionSelectedName: '',
                    ProductOptionId: 0,
                    OptionSelected: null,
                    MultiOptionsSelected: null,
                    OneChoiceWithValueSelected: 
                        OptionSelected: 0,
                        Quantity: 0,
                        Price: 0,
                    ,
                    MultioptionWithValueSelected: [],
                ,
            ],
        ,
    ],
    Categories: [''],
);

如果我有几个像上面那样的usestate，我的代码看起来很长，如何简化它。

如果我这样使用会出错

let [orderSummary, setOrderSummary] = useState<OrderSummary>()

【问题讨论】：

您的OrderSummary 是类型还是实际对象？

【参考方案1】：

let [orderSummary, setOrderSummary] = useState<OrderSummary>( as any)

【讨论】：

上面的代码正在运行，但是当我从响应中获取一些详细信息时出现错误（未捕获的类型错误：无法读取未定义的属性“长度”），当我尝试这样时 - orderSummary.Items.length，如果我评论这部分它的工作，但我需要检查项目。长度

您应该使用可选链来访问您的属性，例如 orderSummary.Items?.length 以防止 orderSummary 或 orderSummary.items 为 null 或未定义。

那是因为 orderSummary 在 api fetch 完成之前没有 items 属性。

另一种方法是为你将首先使用的属性设置初始值，像这样let [orderSummary, setOrderSummary] = useState<OrderSummary>( Items: [] as any)

useState<OrderSummary>( Items: [] as any) - 正在工作，谢谢...

【参考方案2】：

你可以像这样使用类型：

let [orderSummary, setOrderSummary] = useState<OrderSummary | null>(null)

当你想使用orderSummary。您可以像这样添加optional chaining：

orderSummary?.StoreId

【讨论】：

如果我使用上面的代码得到错误--类型''上不存在属性'StoreId'。

我得到相同的@Viet

现在出现 TypeError: Cannot read property 'StoreId' of null"，我按照下面的代码，现在可以工作了，谢谢你的支持。