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

Рейтинг: 0Ответов: 0Опубликовано: 22.02.2023

Написал интерфейс в фале 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.

Ответы

Ответов пока нет.