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

Я создаю приложение 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, которые я отправлю на внутренний сервер для обновления информации о пользователе.


reactjs javascript state object dynamic
person Rohan Mandhare    schedule 09.11.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

person junwen-k    schedule 09.11.2019
comment
Можешь отметить мой ответ как правильный? Спасибо ! - person junwen-k; 10.11.2019