reactjs - 无法在对象的React类component()中使用带有传播运算符(...)的handleChange()和handleChange()来更改值

Question

not able to get the values to change with the spread operator in handleChange()following is the error I get The specified value "" cannot be parsed, or is out of range.

     class DashboardPersonalInfoItm extends Component {
      constructor(props) {
        super(props);
        this.state = {
          personalInfo: [],
        };
    
    
      }
    async componentDidMount() {
        let data = await  ApiCalls.getPersonalInfo();
        this.setState({personalInfo: data});
    
    
         }

following is where i am using spread operator and using to update the existing value of each field

 handlePersonalInfoChange = event => {
    
    this.setState({
      ...this.state.personalInfo,
      [event.target.name]: event.target.value
    });
  };
 return (
   
    <form className={classes.container}  autoComplete="off">
</div>
    <TextField
              id="standard-required"
              disabled = {this.state.isDisabled}
              label="First Name"
              defaultValue="First Name"
              value = {this.state.personalInfo.firstName}
              className={classes.textField}
              margin="normal"
              onChange={this.handlePersonalInfoChange}
              name="firstName"
            />
            <TextField
              id="standard-required"
              disabled = {this.state.isDisabled}
              label="Last Name"
              defaultValue="Last Name"
              value = {this.state.personalInfo.lastName}
              className={classes.textField}
              margin="normal"
              onChange={this.handlePersonalInfoChange}
              name="lastName"
            />
</div>
</form>
}

Answer 1

如果要将其附加到状态，则正确的方法是。

this.setState(prevState => ({ 
      personalInfo: prevState.personalInfo, 
      [event.target.name]: event.target.value 
 }));