Как добавить данные в объект используя useState в React?

Question

Суть такова, у меня есть стейт data с пустыми данными

const [data, setData] = useState({
  newAdv: {
    titleAdv: '',
    linkAdv: '',
    imgAdv: ''
  },
  newNews: {
    titleNews: '',
    partition: '',
    imgNews: '',
    descNews: '',
    title: '',
    keywords: '',
    desc: '',
    date: '',
    datetime: ''
  },
  home: {
    titleSite: '',
    email: '',
    link_group_ok: ''
  }
})

A данные заносятся через input'ы использующие handler на onChange:

function handlerChangePost(event) {
  const nameEvent = event.target.name
  const pathEvent = event.target.id
  const valueEvent = event.target.value
  setData(prevState => ({
    ...prevState,
    [pathEvent]: {
      [nameEvent]: valueEvent
    }
  }))
}

При запуске такого кода в консоли видно, что стейт при записи данных в объект стирает свё предыдущее состояние, то есть получается что-то вроде того:

        newAdv: {
            titleAdv: '',
            linkAdv: '',
            imgAdv: ''
        },
        newNews: {
            titleNews: '2241421421',
        },
        home: {
            titleSite: '',
            email: '',
            link_group_ok: ''
        }

Как можно добавить новые данные в объект не затирая предыдущего состояния?

Answer 1

Так как изменяемый элемент - это объект, то нужно также в него разворачивать предыдущее значение:

function handlerChangePost(event) {
  const nameEvent = event.target.name;
  const pathEvent = event.target.id;
  const valueEvent = event.target.value;
  setData((prevState) => ({
    ...prevState,
    [pathEvent]: {
      ...prevState[pathEvent],
      [nameEvent]: valueEvent
    }
  }));
}

Answer 2

Я бы создал хук от useState на или воспользовался готовым решением useStateHistory(https://github.com/carlomartinucci/use-state-history).

Если посмотришь исходник, то станет очевидно что создать свой хук не такая уж и сложная задача.

БЛОГ НА HUSL

Как добавить данные в объект используя useState в React?

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