Как добавить недавно обновленные динамические значения в состоянии к старому объекту в React.js?

Question

Я создаю приложение CRUD на Java + React.js. Я хочу обновить информацию о пользователе, я заполняю динамическую форму, основанную на массиве employeeDetails. В результате я получаю динамически обновляемые значения от пользователя в состоянии. Но я не уверен, как добавить эти новые входные значения из формы в старый объект, а также обновить его и отправить в бэкэнд. Заранее благодарен за помощь.

Я пытался сделать this.setState () после отправки формы, чтобы обновить старый объект новыми значениями.

Состояние реагирующего приложения:

state = {
    employeeDetails: ['Name', 'Gender', 'Education', 'Address', 'Mobile Number', 'Experience'],
    editEmployee: {
     Name: "Rohan",
     Gender: 23,
     Education: "Software Engineer",
     Mobile Number: 12345,
     Experience: "Fresher"
    }
  }

Динамическая форма обновления пользователя:

<form onSubmit={props.updateEmployee}>
   {
     Object.keys(props.editEmployee).map(details => <Fragment key={details}>
         <label>{details}</label><br />
         <input type="text" name={details} onChange={props.handleChange} defaultValue={props.editEmployee[details]} />
 </Fragment>
)}

Метод обновления:

updateEmployee = (e) => {
    e.preventDefault();
    this.setState({
    editEmployee: {...this.state.editEmployee, dynamic value}
    })
    axios.put("http://localhost:9450/updateEmployee", this.state.editEmployee)
      .then(res => console.log(res))
      .then(this.setState({
        editEmployee: ''
      }))
  }

Я хочу, чтобы недавно обновленные значения в моем объекте editEmployee были отправлены на внутренний сервер для обновленияинформация о пользователе.

Answer 1

Глядя на ваш код, предполагая, что ваша Форма является другим отдельным компонентом.

const Form = (props) => (
  <form onSubmit={props.updateEmployee}>
    {Object.keys(props.editEmployee).map((details) => (
      <React.Fragment key={details}>
        <label>{details}</label><br />
        <input type="text" name={details} onChange={props.handleChange} defaultValue={props.editEmployee[details]} />
      </React.Fragment>
    ))}
  </form>
);

В вашем родительском контейнере у вас есть состояние и методы

state = {
  employeeDetails: ['Name', 'Gender', 'Education', 'Address', 'Mobile Number', 'Experience'],
  editEmployee: {
    Name: "Rohan",
    Gender: 23,
    Education: "Software Engineer",
    'Mobile Number': 12345,
    Experience: "Fresher"
  }
}

handleChange = (e) => {
  this.setState({
    editEmployee: {
      ...this.state.editEmployee,
      [e.target.name]: e.target.value,
    },
  })
}

updateEmployee = (e) => {
  e.preventDefault();
  axios.put("http://localhost:9450/updateEmployee", this.state.editEmployee)
    .then(res => console.log(res))
}

Ваш handleChange должен обновитьсязначения состояния, и вам не нужно звонить setState во время отправки формы. У вас уже должны быть последние изменения в вашем штате, когда вы звоните updateEmployee