Unhandled Rejection (TypeError) ????

[Rayman244]

I am recieving a type error.

Unhandled Rejection (TypeError): undefined is not an object (evaluating 'options[0].id') _callee3$ src/Componets/CheckoutForm/AddressForm.jsx:55 52 | 53 | setShippingOptions(options); 54 | console.log(shippingOptions);

55 | setShippingOption(options[0].id); 56 | }; 57 | 58 | useEffect(() => {

`import React, { useState, useEffect } from "react"; import { InputLabel, Select, MenuItem, Button, Grid, Typography, } from "@material-ui/core"; import { useForm, FormProvider } from "react-hook-form"; import { Link } from "react-router-dom";

import FormInput from "../CheckoutForm/CustomTxtField"; import { commerce } from "../../lib/Commerce";

const AddressForm = ({ checkoutToken, test }) => { const [shippingCountries, setShippingCountries] = useState([]); const [shippingCountry, setShippingCountry] = useState(""); const [shippingSubdivisions, setShippingSubdivisions] = useState([]); const [shippingSubdivision, setShippingSubdivision] = useState(""); const [shippingOptions, setShippingOptions] = useState([]); const [shippingOption, setShippingOption] = useState(""); const methods = useForm();

const fetchShippingCountries = async (checkoutTokenId) => { const { countries } = await commerce.services.localeListShippingCountries( checkoutTokenId );

setShippingCountries(countries);
setShippingCountry(Object.keys(countries)[0]);

};

const fetchSubdivisions = async (countryCode) => { const { subdivisions } = await commerce.services.localeListSubdivisions( countryCode );

setShippingSubdivisions(subdivisions);
setShippingSubdivision(Object.keys(subdivisions)[0]);

};

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

setShippingOptions(options);
console.log(shippingOptions);
setShippingOption(options[0].id);

};

useEffect(() => { fetchShippingCountries(checkoutToken.id); }, []);

useEffect(() => { if (shippingCountry) fetchSubdivisions(shippingCountry); }, [shippingCountry]);

useEffect(() => { if (shippingSubdivision) fetchShippingOptions( checkoutToken.id, shippingCountry, shippingSubdivision ); }, [shippingSubdivision]);

return (

Shipping address

test({ ...data, shippingCountry, shippingSubdivision, shippingOption, }) )} > Shipping Country setShippingCountry(e.target.value)} > {Object.entries(shippingCountries) .map(([code, name]) => ({ id: code, label: name })) .map((item) => ( {item.label} ))} Shipping Subdivision setShippingSubdivision(e.target.value)} > {Object.entries(shippingSubdivisions) .map(([code, name]) => ({ id: code, label: name })) .map((item) => ( {item.label} ))} Shipping Options setShippingOption(e.target.value)} > {shippingOptions .map((sO) => ({ id: sO.id, label: `${sO.description} - (${sO.price.formatted_with_symbol})`, })) .map((item) => ( {item.label} ))}

Back to Cart Next

    </form>
  </FormProvider>
</div>

); };

export default AddressForm; `