Open Rayman244 opened 3 years ago
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 (
</form> </FormProvider> </div>
); };
export default AddressForm; `
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);
`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 );
};
const fetchSubdivisions = async (countryCode) => { const { subdivisions } = await commerce.services.localeListSubdivisions( countryCode );
};
const fetchShippingOptions = async ( checkoutTokenId, country, stateProvince = null ) => { const options = await commerce.checkout.getShippingOptions( checkoutTokenId, { country, region: stateProvince } );
};
useEffect(() => { fetchShippingCountries(checkoutToken.id); }, []);
useEffect(() => { if (shippingCountry) fetchSubdivisions(shippingCountry); }, [shippingCountry]);
useEffect(() => { if (shippingSubdivision) fetchShippingOptions( checkoutToken.id, shippingCountry, shippingSubdivision ); }, [shippingSubdivision]);
return (