不要直接改变状态的警告。在 reactjs 中使用 setState()

Question

我是 reactjs 的新手，这是我想在其中使用“=”符号更新状态的代码，因为当我尝试使用 setState 方法更新状态时，它会给出错误，因为我需要更新一个对象中的对象。就像我需要 setState({employe.fname:itemTypeValue})。我已经经历过类似的问题，但无法找到正确的答案，因为尝试过其他方式但未能正确实施。如果您有任何其他逻辑，那么随时欢迎您请查看代码

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

您应该将 setState 与扩展运算符 (...) 结合使用，以保持对象的现有值处于状态。

例如：

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

Answer 2

您应该先克隆状态，然后再分配新值。像这样：

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

因为你的状态字段在这里是员工而不是 fname，你应该在更新字段时创建一个新的员工对象并在 setState

中使用它

Answer 3

不要update/set带有“=”号的状态。
与其尝试更新对象内部的对象，不如尝试克隆员工状态，然后更新对象并设置状态。

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

不要直接改变状态的警告。在 reactjs 中使用 setState()

Warning of Do not mutate state directly. Use setState() in reactjs

javascript

frontend

updates

reactjs