Почему возникает такая ошибка при изменении state: FormAddUser.tsx:90 Uncaught TypeError: Cannot read properties of undefined (reading 'lat')

написал Интерфейс в фале types.tsx для пользователя

    export interface IUser {
        id: number,
        name: string,
        username: string,
        email: string,
        address: {
            street: string,
            suite: string,
            city: string,
            zipcode: string,
            geo: {
                lat: number,
                lng: number
            }
        }
    }

далее в файле FormAddUser.tsx стейт

    const [name, setName] = useState<any>(
        {
            // id: '',
        name: '',
        username: '',
        email: '',
        address: {
            street: '',
            suite: '',
            city: '',
            zipcode: '',
            geo: {
                lat: '',
                lng: '',
            }
    }});

Функции для изменения стейта, еще не все дописал и возвращаемый объект

    function changeHandlerA(e:React.ChangeEvent<HTMLInputElement>) {
       setName({...name, name: e.target.value})
    }
    function changeHandlerB(e:React.ChangeEvent<HTMLInputElement>) {
       setName({...name, username: e.target.value})
    }
    
    function changeHandlerC(e:React.ChangeEvent<HTMLInputElement>) {
       setName({...name, email: e.target.value})
    }
    
    function changeHandlerD(e:React.ChangeEvent<HTMLInputElement>) {
       setName({...name, address: {street: e.target.value}})
    }

возвращаемый объект

    return (
        <div className="cover-add-form">
            <div className="cover-add-form__block">
                <form action="" className="cover-add-form__titleUp">
                    <div className="cover-add-form__title">Форма внесения данных</div>
                        <MyInput onChange={changeHandlerA} className="inp-my" placeholder = "имя" defaultValue = {name.name}/>
                        <MyInput onChange={changeHandlerB} className="inp-my" placeholder = "имя пользователя" defaultValue = {name.username}/>
                            <MyInput onChange={changeHandlerC} className="inp-my" placeholder = "маил" defaultValue = {name.email}/>
                        <MyInput onChange={changeHandlerD} className="inp-my" placeholder = "улица" defaultValue = {name.address.street}/>
                        <MyInput  className="inp-my" placeholder = "дом" defaultValue = {name.address.suite}/>
                        <MyInput  className="inp-my" placeholder = "город" defaultValue = {name.address.city}/>
                        <MyInput  className="inp-my" placeholder = "код"  defaultValue = {name.address.zipcode}/>
                        <MyInput  className="inp-my" placeholder = "локация" defaultValue = {name.address.geo.lat}/>
                        <MyInput  className="inp-my" placeholder = "локация гео" defaultValue = {name.address.geo.lng}/>
                     <div className="cover-btn">
                        <Mybutton  className="btn-my btn-my__fz">Добавить</Mybutton>
                        <Mybutton onClick={closeModal} className="btn-my btn-my__fz">отмена</Mybutton>
                     </div>
                    </form>
                </div>
            </div>
        );
    };

в консоль вывел name и вижу изменения когда пишу, но когда прописываю в инпут для street вылетает ошибка, что не может прочить у undefinded 'lat'. не могу понять при чем тут вообще lat.**


Ответы (0 шт):