Как обновить вложенное состояние в React Component без использования Redux

В этой статье я собираюсь создать простую регистрационную форму с помощью Bootstrap, где мы сделаем функциональный компонент, в этом компоненте мы будем использовать React Usestate () Крючки, где сделает вложенное состояние в одном объекте и попытаться обновить вложенный объект. Это очень сложно обновить вложенное состояние в реальном проекте. Я надеюсь, что вы знакомы с Basic of rectjs, мы не собираемся базовые настройки Reactjs, мы собираемся прыгать на создание формы регистрации.

Давайте начнем создавать регистрационную форму с помощью bootstraps. в App.js Файл мы создадим регистрационную форму Просто скопируйте фрагмент HTML-кода.

Теперь давайте начнем создать состояние, в котором пользовательские данные будут доступны в нашем компоненте. App.js.

export default function App() {
  const [user, setUser] = React.useState({
    username: '',
    email: '',
    address: {
      state: '',
      city: '',
      geolocation: {
        lat: '',
        long: ''
      }
    }
  });

  }

Здесь мы создали состояние с помощью вложенного состояния. Теперь добавим атрибуты имени и значения в нашем HTML-коде, а также добавить метод отправки формы Отправить и событие Onchange Onchange в поле входных данных HTML.

Onchange Мероприятия

const onChange = e => {
    let data = { ...user };
    let name = e.target.name;
    let val = e.target.value;
    if (name == 'username' || name == 'email') {
      data = { ...data, [name]: val };
    } else if (name == 'state' || name == 'city') {
      data = {
        ...data,
        address: {
          ...data.address,
          [name]: val
        }
      };
    } else if (name == 'lat' || name == 'long') {
      data = {
        ...data,
        address: {
          ...data.address,
          geolocation: {
            ...data.address.geolocation,
            [name]: val
          }
        }
      };
    }
    setUser(data);
  };

а также OnSubmit событие представить

const submit = e => {
    e.preventDefault();
    console.log(user);
  };

Давайте посмотрим весь код вместе. App.js.

import React from 'react';
export default function App() {
  const [user, setUser] = React.useState({
    username: '',
    email: '',
    address: {
      state: '',
      city: '',
      geolocation: {
        lat: '',
        long: ''
      }
    }
  });
  const onChange = e => {
    let data = { ...user };
    let name = e.target.name;
    let val = e.target.value;
    if (name == 'username' || name == 'email') {
      data = { ...data, [name]: val };
    } else if (name == 'state' || name == 'city') {
      data = {
        ...data,
        address: {
          ...data.address,
          [name]: val
        }
      };
    } else if (name == 'lat' || name == 'long') {
      data = {
        ...data,
        address: {
          ...data.address,
          geolocation: {
            ...data.address.geolocation,
            [name]: val
          }
        }
      };
    }
    setUser(data);
  };
  const submit = e => {
    e.preventDefault();
    console.log(JSON.stringify(user));
  };
  return (
    
      
        
          
        
        
          
        
        
          
        
        
          
        
        
          
        
        
          
        
        
          
        
      
    
  );
}

Оригинал: “https://dev.to/abu/how-to-update-nested-state-in-react-component-without-using-redux-1k6k”

Читайте ещё по теме: