Bagaimana cara menambahkan nilai dinamis yang baru diperbarui ke objek lama di React.js?

Saya membuat aplikasi CRUD di Java + React.js. Saya ingin memperbarui informasi pengguna, saya mengisi formulir dinamis berdasarkan array EmployeeDetails. Hasilnya, saya mendapatkan nilai yang diperbarui secara dinamis dari pengguna di negara bagian. Tapi saya tidak yakin bagaimana cara menambahkan nilai input baru dari formulir ke objek lama, dan memperbaruinya dan mengirimkannya ke backend. Terima kasih sebelumnya, bantuan Anda dihargai.

Saya mencoba melakukan ini.setState() setelah mengirimkan formulir, untuk memperbarui objek lama dengan nilai baru.

Status aplikasi reaksi:

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

Bentuk dinamis pengguna pembaruan:

<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>
)}

Metode pembaruan:

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: ''
      }))
  }

Saya ingin nilai yang baru diperbarui di objek editEmployee saya yang akan saya kirim ke server backend untuk memperbarui informasi pengguna.


reactjs javascript state object dynamic
person Rohan Mandhare    schedule 09.11.2019    source sumber

Jawaban (1)


arrow_upward
0
arrow_downward

Melihat kode Anda, dengan asumsi bahwa Formulir Anda adalah komponen terpisah lainnya.

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>
);

Di wadah induk Anda, Anda memiliki status dan metode

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 Anda harus memperbarui nilai negara bagian dan Anda tidak perlu menelepon setState selama pengiriman formulir. Anda seharusnya sudah mendapatkan perubahan terbaru di negara bagian Anda saat menelepon updateEmployee

person junwen-k    schedule 09.11.2019
comment
Bisakah Anda menandai jawaban saya sebagai jawaban yang benar? Terima kasih ! - person junwen-k; 10.11.2019