Блог

Я пытаюсь прочитать значение из выбора, но получаю эту ошибку, когда выбираю другую страну «Ошибка типа: Не удается прочитать свойства неопределенного (чтение «значения»)». Ошибка также гласит: ‘console.warn([«Материал-пользовательский интерфейс: вы указали значение, выходящее за пределы диапазона ".concat(value, " для выбора «).concat(имя ? «(имя=»».конкат(имя, «») «) : «, «компонент.»), «Рассмотрите возможность предоставления значения, соответствующего одному из доступных вариантов или».», «Доступные значения «.concat(значения.фильтр(функция (x) {

 import React, {useState, useEffect} from 'react';  import { Select,MenuItem, Button, Grid, Typography, InputLabel } from '@material-ui/core';   import { commerce } from '../../lib/Commerce';    const AddressForm = ({checkoutToken}) =gt; {  const [shippingCountries, setShippingCountries] = useState([]);  const [shippingCountry, setShippingCountry] = useState('');  const [shippingSubdivisions, setShippingSubdivisions] = useState([]);  const [shippingSubdivision, setShippingSubdivision] = useState('');     const countries = Object.entries(shippingCountries).map(([code, name]) =gt; ({id:code,   label:name}));  const subdivisions = Object.entries(shippingSubdivisions).map(([code, name]) =gt; ({id:code,   label:name}));   const fetchShippingCountries = async(checkoutTokenId) =gt;{  const {countries} = await commerce.services.localeListCountries(checkoutTokenId);   setShippingCountries(countries);  setShippingCountry(Object.keys(countries)[0]);  }   const fetchSubdivisions = async(countryCode)=gt;{  const {subdivisions } = await commerce.services.localeListSubdivisions(countryCode);   setShippingSubdivisions(subdivisions);  setShippingSubdivision(Object.keys(subdivisions)[0]);  }    useEffect(() =gt;{  fetchShippingCountries(checkoutToken.id);  },[checkoutToken.id]);    useEffect(()=gt;{  if(shippingCountry) fetchSubdivisions(shippingCountry);  },[shippingCountry]);    return (  lt;gt; lt;Typography variant='h6' gutterBottomgt; Shipping Address lt;/Typographygt;   lt;FormProvider {... methods}gt;  lt;form onSubmit={''}gt;  lt;Grid container spacing={3}gt;  lt;FormInput required name='First Name' label='First Name' /gt;  lt;FormInput required name='Last Name' label='Last Name' /gt;  lt;FormInput required name='Email' label='Email' /gt;  lt;FormInput required name='Address' label='Address' /gt;  lt;FormInput required name='City' label='City' /gt;  lt;FormInput required name='Phone Number' label='Phone Number' /gt;    lt;Grid item xs={12} sm={6}gt;  lt;InputLabelgt;Shipping Countrylt;/InputLabelgt;  lt;Select value={shippingCountry} fullWidth onChange={(e) =gt;   setShippingCountry(e.target.value)}gt;  {countries.map((country)=gt;(  lt;MenuItem key={country.id} value={country.id}gt;  {country.label}  lt;/MenuItemgt;  ))};  lt;/Selectgt;  lt;/Gridgt;  lt;Grid item xs={12} sm={6}gt;  lt;InputLabelgt;Shipping Subdivisionlt;/InputLabelgt;  lt;Select value={shippingSubdivision} fullWidth onChange={(e) =gt;   setShippingSubdivision(e.target.value)}gt;  {subdivisions.map((subdivision)=gt;(  lt;MenuItem key={subdivision.id} value={subdivision.id}gt;  {subdivision.label}  lt;/MenuItemgt;   ))};  lt;/Selectgt;  lt;/Gridgt;  lt;/gt;  );  }   export default AddressForm;