Как правильно менять состояние вложенного объекта?

Question

На данный момент при изменении любого инпута стираются остальные свойства объекта. Как правильно поменять состояние?

import React, {useState} from 'react'
import "./styles.css";
export default function App() {
  const [data, setData] = useState({
    a: {
      value: "data",
      value2: "data2"
    },
    b: {
      value: "data",
      value2: "data2"
    }
  })
  const changeInput = (e, key) => {
    setData(value => ({...value, [key]: {[e.target.name]: e.target.value}}))
    console.log(data) 
  }
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <input name="value" value={data.a.value} onChange={(e) => changeInput(e, 'a')}/>
      <input name="value2" value={data.a.value2} onChange={(e) => changeInput(e, 'a')}/>

    </div>
  );
}

Answer 1

Поменяйте [key]: { ...value[key], [e.target.name]: e.target.value }

import "./styles.css";
import { useState } from "react";

export default function App() {
  const [data, setData] = useState({
    a: {
      value: "data",
      value2: "data2"
    },
    b: {
      value: "data",
      value2: "data2"
    }
  });
  const changeInput = (e, key) => {
    setData((value) => ({
      ...value,
      [key]: { ...value[key], [e.target.name]: e.target.value }
    }));
    console.log(data);
  };
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <input
        name="value"
        value={data.a.value}
        onChange={(e) => changeInput(e, "a")}
      />
      <input
        name="value2"
        value={data.a.value2}
        onChange={(e) => changeInput(e, "a")}
      />
    </div>
  );
}

БЛОГ НА HUSL

Как правильно менять состояние вложенного объекта?

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