Предупреждение Не изменяйте состояние напрямую. Используйте setState () в reactjs

Question

Я новичок в reactjs. Вот код, в котором я хочу обновить состояния с помощью знака "=", потому что, когда я пытаюсь обновить состояние с помощью метода setState, он выдает ошибку, так как мне нужно обновить объект внутри объекта. как мне нужно для setState ({employee.fname: itemTypeValue}). Я уже прошел через аналогичный вопрос, но не могу найти правильный ответ, как пытался другим способом, но не смог правильно его реализовать. если у вас есть какие-либо другие логики c, так что мы всегда рады вам. Пожалуйста, посмотрите код

import React from 'react' ;


class update extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      id :this.props.location.data,
      employe:undefined,
     
    }
  }
componentDidMount(){
  fetch(`http://localhost:4000/viewone/${this.state.id}`)
  .then(data => data.json())
      .then((data)=>{this.setState({employe:data})})
}
submit(){
  let data={
    "fname" : this.state.employe.fname,
    "lname" : this.state.employe.lname,
    "cnic" : this.state.employe.cnic,
    "gender":this.state.employe.gender,
    "faname":this.state.employe.faname,
    "joining_date":this.state.employe.joining_date,
    "dob":this.state.employe.dob,
    "status":this.state.employe.status,
    "desig":this.state.employe.desig,
    "mang_name":this.state.employe.mang_name,
    "prog_name":this.state.employe.prog_name,
    "address":this.state.employe.address,
    "grade":this.state.employe.grade,
    "id":this.state.employe._id
  };
    fetch("http://localhost:4000/update",{
      method:"POST",
      headers:{
        "Content-Type":"application/json",
        "Accept":"application/json"
      },
      body:JSON.stringify(data)
    }).then((result)=>{
     
        console.log("RESP",result)
        alert("DATA IS SUBMITTED")
     
    }).catch(err => { console.log("Error",err)})
  }


valid (item,type){
  let itemTypeValue = item.target.value;
  switch(type)
  {
    case "fname" :{
      this.state.employe.fname = itemTypeValue;
      // this.setState({fname:itemTypeValue})
     break;
    }
    case "lname":{
      this.state.employe.lname = itemTypeValue
      // this.setState({lname:itemTypeValue})
      break;
    }
    case "cnic":{
      this.state.employe.cnic = itemTypeValue
      // this.setState({cnic:itemTypeValue})
      break;
    }
    case "gender":{
      this.state.employe.gender = itemTypeValue
      // this.setState({gender:itemTypeValue})
      break;
    }
    case "faname":{
      this.state.employe.faname = itemTypeValue
      // this.setState({faname:itemTypeValue})
      break;
    }
    case "joining_date":{
      this.state.employe.joining_date = itemTypeValue
      // this.setState({joining_date:itemTypeValue})
      break;
    }
    case "dob":{
      this.state.employe.dob = itemTypeValue
      // this.setState({dob:itemTypeValue})
      break;
    }
    case "status":{
      this.state.employe.status = itemTypeValue
      // this.setState({status:itemTypeValue})
      break;
    }
    case "desig":{
      this.state.employe.desig = itemTypeValue
      // this.setState({desig:itemTypeValue})
      break;
    }
    case "mang_name":{
      this.state.employe.mang_name = itemTypeValue
      // this.setState({mang_name:itemTypeValue})
      break;
    }
    case "prog_name":{
      this.state.employe.prog_name = itemTypeValue
      // this.setState({prog_name:itemTypeValue})
      break;
    }
    case "address":{
      this.state.employe.address = itemTypeValue
      // this.setState({address:itemTypeValue})
      break;
    }
    case "grade":{
      this.state.employe.grade = itemTypeValue
      // this.setState({grade:itemTypeValue})
      break;
    }
   
  }
}

  render() {
    if(this.state.employe){
    return (
      <div>
     <h1>Update Page</h1>
        <br/>
        <label>First Name :</label>
        <input type="text"  defaultValue={this.state.employe.fname} onChange={(item)=>this.valid(item,"fname")}/>
        <br/>
        <label>Last Name :</label>
        <input type="text"  defaultValue={this.state.employe.lname} onChange={(item)=>this.valid(item,"lname")}/>
        <br/>
        <label>CNIC :</label>
        <input type="text"  defaultValue={this.state.employe.cnic} onChange={(item)=>this.valid(item,"cnic")}/>
        <br/>
        <label>Gender :</label>
        <input type="text"  defaultValue={this.state.employe.gender} onChange={(item)=>this.valid(item,"gender")}/>
        <br/>
        <label>Father Name :</label>
        <input type="text"  defaultValue={this.state.employe.faname} onChange={(item)=>this.valid(item,"faname")}/>
        <br/>
        <label>Joining Date :</label>
        <input type="text"  defaultValue={this.state.employe.joining_date} onChange={(item)=>this.valid(item,"joining_date")}/>
        <br/>
        <label>Date of Birth :</label>
        <input type="text"  defaultValue={this.state.employe.dob} onChange={(item)=>this.valid(item,"dob")}/>
        <br/>
        <label>Status :</label>
        <input type="text"  defaultValue={this.state.employe.status} onChange={(item)=>this.valid(item,"status")}/>
        <br/>
        <label>Designation :</label>
        <input type="text"  defaultValue={this.state.employe.desig} onChange={(item)=>this.valid(item,"desig")}/>
        <br/>
        <label>Manager Name :</label>
        <input type="text"  defaultValue={this.state.employe.mang_name} onChange={(item)=>this.valid(item,"mang_name")}/>
        <br/>
        <label>Project Name :</label>
        <input type="text"  defaultValue={this.state.employe.prog_name} onChange={(item)=>this.valid(item,"prog_name")}/>
        <br/>
        <label>Address :</label>
        <input type="text"  defaultValue={this.state.employe.address} onChange={(item)=>this.valid(item,"address")}/>
        <br/>
        <label>Grade / Scale :</label>
        <input type="text"  defaultValue={this.state.employe.grade} onChange={(item)=>this.valid(item,"grade")}/>
        <br/>

        <button onClick={()=>this.submit()}>Submit</button>
 </div>
    );
  }else{
    return(<div><h1>No Data Found!</h1></div>)
  }
}
}


export default update ;

Answer 1

Вы должны сначала клонировать свое состояние, прежде чем присваивать новое значение. Вот так:

const employee = {...this.state.employe}; // Clone the employee object
employee.fname = itemTypeValue; // Update the field
this.setState({ employe:employee }); // Set the new employee object

Так как ваше поле состояния здесь - это employee, а не fname, вы должны создать новый объект employee при обновлении поля и использовать его в setState

Answer 2

• Не обновлять / устанавливать состояние со знаком "=".

• Вместо того, чтобы пытаться обновить объект внутри объекта, попробуйте клонировать состояние занятого, затем обновить объект и установить состояние.

  let employe = {...this.state.employe}; case "fname" :{ employe.fname = itemTypeValue; this.setState(employe); break; }

Answer 3

Вы должны использовать setState с оператором распространения (...), чтобы сохранить существующие значения объекта в состоянии.

, например:

case "fname" :{
 this.setState({
   ...this.state.employe,
   fname : itemTypeValue;
 })
 break;
}