Javascript ReactJS-未处理的拒绝（TypeError）：无法读取未定义的属性“id”

基本上，我是通过与stripe和Commercejs链接来创建一个电子商务测试站点。在签出表单加载之前，一切正常。我能够输入信息，但是，在加载页面时，我得到错误：

未处理的拒绝类型错误：无法仅为一行代码读取未定义的属性“id”。即：

setShippingOption(options[0].id);

该代码嵌套在：

const fetchShippingOptions = async (checkoutTokenId, country, stateProvince = null) => {
   const options = await commerce.checkout.getShippingOptions(checkoutTokenId, { country, region: stateProvince });

setShippingOptions(options);
setShippingOption(options[0].id);
};

此代码主要用于地址表单，如下所示：

从“React”导入React，{useState，useffect}； 从“@material ui/core”导入{InputLabel，Select，MenuItem，Button，Grid，排版}； 从“react hook form”导入{useForm，FormProvider}； 从'react router dom'导入{Link}； 从“../../lib/commerce”导入{commerce}； 从“/FormInput”导入FormInput； const AddressForm={checkoutToken，next}=>{ const[shippingCountries，setShippingCountries]=useState[]； const[shippingCountry，setShippingCountry]=使用状态； const[shippingSubdivisions，setShippingSubdivisions]=useState[]； const[shippingSubdivision，setShippingSubdivision]=使用状态； const[shippingOptions，setShippingOptions]=useState[]； const[shippingOption，setShippingOption]=useState； const methods=useForm； const fetchShippingCountries=async checkoutTokenId=>{ const{countries}=await commerce.services.localeListShippingCountriescheckoutTokenId； 设置ShippingCountries中心； setShippingCountryObject.keyscountries[0]； }; const fetchsubsections=async countryCode=>{ const{subdivisions}=await commerce.services.localelistsubdivisionscontrycode； 设置装运分包部门； setShippingSubdivisionObject.keyssubdivisions[0]； }; const fetchShippingOptions=async checkoutTokenId，country，stateProvince=null=>{ const options=await commerce.checkout.GetShippingoptions CheckOutTokenId，{country，region:stateProvince}； 设置shippingoptions选项； setShippingOptionoptions[0]。id； }; useEffect=>{ fetchShippingCountriescheckoutToken.id； }, []; useEffect=>{ 如果shippingCountry获取SubsectionsShippingCountry； }，[shippingCountry]； useEffect=>{ 如果ShippingSubsection获取ShippingOptions CheckOutToken.id、shippingCountry、ShippingSubsection； }，[ShippingSubsection]； 回来 送货地址 下一步{…数据，shippingCountry，ShippingSubsection，shippingOption}> 航运国 setShippingCountrye.target.value}> {Object.entriesshippingCountries.map[code，name]=>{id:code，label:name}.mapitem=> {item.label} } 航运分部 SetShippingSubDivision.target.value}> {Object.entriesshippingSubdivisions.map[code，name]=>{id:code，label:name}.mapitem=> {item.label} } 运输选择 setShippingOptione.target.value}> {shippingOptions.mapsO=>{id:sO.id，标签：`${sO.description}-${sO.price.formatted_with_symbol}`}。mapitem=> {item.label} } 返回购物车 下一个 ; };

---

导出默认地址表 检查仪表板上的配送设置，您可能缺少细分

请确保Commercejs配送设置中的国家/地区具有所有正确的地区。我使用的是美国，但注意到我只启用了2个地区。

编辑美国地区和在添加/编辑国家/地区，确保添加所有57个地区。

您确定选项具有id属性吗？将console.logoptions放在设置shippingoptions选项之前；看看它在控制台上打印了什么，就这样了。Wait commerce.checkout.getShippingOptions返回一个空数组，而我认为它应该返回一个对象数组。选项[0]未定义，因此没有可访问的id属性。您应该首先检查数组长度，或者使用可选的链接运算符，即选项[0]？.id。我的意思是，在访问该对象之前，您可以先检查选项[0]是否存在，如选项[0]&选项[0].id。可选的链接操作符允许您更简洁地编写此操作。没有什么比官方文件更好的了