จะเพิ่มค่าไดนามิกที่อัปเดตใหม่ในสถานะให้กับวัตถุเก่าใน React.js ได้อย่างไร

ฉันกำลังสร้างแอป CRUD ใน Java + React.js ฉันต้องการอัปเดตข้อมูลผู้ใช้ ฉันกำลังเติมแบบฟอร์มแบบไดนามิกตามอาร์เรย์ EmployeeDetails ผลลัพธ์ฉันได้รับค่าที่อัปเดตแบบไดนามิกจากผู้ใช้ในสถานะ แต่ฉันไม่แน่ใจว่าจะเพิ่มค่าอินพุตใหม่เหล่านั้นจากแบบฟอร์มไปยังวัตถุเก่าได้อย่างไร และอัปเดตและส่งไปที่แบ็กเอนด์ ขอบคุณล่วงหน้าความช่วยเหลือของคุณได้รับการชื่นชม

ฉันลองทำสิ่งนี้.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 และ method

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