如何合并已编辑对象与现有状态

Question

我尝试编辑一个对象并将其添加到状态，然后从api请求新对象，然后在编辑第二个对象时，我的旧状态消失了

我认为问题是我在第二个编辑对象上单击“保存”，我的旧状态消失了

我的主要组成部分

class MyFriends extends Component{

  state = {
    persons: [],
  }

   async componentDidMount( ){
     let response = await axios(`https://randomuser.me/api/?results=1`)
     this.setState({
       persons: response.data.results
     })
  }

   update = async () => {
    const response = await axios(`https://randomuser.me/api/?results=1`)

    this.setState(prevState => ({
      persons: [...prevState.persons, ...response.data.results]
    }))
  }


  handleDelete = (e) => {
    const test = this.state.persons.splice(-1)
    let oare = this.state.persons.filter( i => i !== test)
    this.setState({
      persons: oare
    })
  }

  updatePerson = (first, last, age, email, numar, pic, nat) => {
    const persoana_noua = {
      name: {first: first, last: last},
      dob: {age:age},
      email: email,
      login: {sha1: numar},
      picture: {large:pic},
      nat: nat
    }
    this.setState(prevState => ({
      persons: [  persoana_noua]
    }))
  }


  render(){
    //console.log(this.state.persons.map(i => i.login.uuid))
    const test = this.state.persons.map( i =>
      <Person  test={this.merge} consoleLog={this.updatePerson} key={i.login.sha1} id={i.login.sha1} first_name={i.name.first} last_name={i.name.last} nat={i.nat}
      picture={i.picture.large} email={i.email} age={i.dob.age}
      />
    )

    //console.log(this.state.persons.map(i => i), 'this is the original')
    return(

      <div className='MyFriends'onClick={this.checkIt} >
      {test}
      <button style={{fontSize: '2em', border: '1px solid green'}} onClick={this.update}>add new friend</button>
      <button style={{fontSize: '2em', border: '1px solid green'}} onClick={this.handleDelete}>delete
      last added friend
      </button>
      <button onClick={this.handleChange}>test</button>
      </div>
    )
  }
}


export default MyFriends;

这是我的第二个“子级”组件

  class Person extends Component {
    state={
      modifica : false,
    }

    handleToggle = (e) => {
      this.setState({
        modifica : !this.state.modifica
      })
    }
    handleSubmit = (e) => {

      const first_name  = document.querySelector('.first_name input').value;
      const last_name = document.querySelector('.last_name input').value;
      const age = document.querySelector('.age input').value;
      const email = document.querySelector('.email input').value;
      const numar = Math.random();
      const pic = this.props.picture;
      const nat = this.props.nat;
      e.preventDefault();
      this.props.consoleLog(first_name, last_name, age, email, numar, pic, nat);

      this.setState({
        modifica: false
      })
      //this.props.test()
    }


    render(props){

      //console.log(this.props.first_name)
      if(this.state.modifica){
      const individ =
        <div className='Person'>
          <form  onSubmit={this.handleSubmit}>
            <h2 className='first_name'>First Name: <input name = 'persoana' type='text'/></h2>
            <h2 className='last_name'>Last Name: <input type='text' /></h2>
            <h3 className='age'>Age: <input type='number' /></h3>
            <img className='flag' src={`https://www.countryflags.io/${this.props.nat}/flat/64.png`}/>
            <img className='pic' src={this.props.picture} />
            <h3 className='email'>email:<input type='text' /></h3>
            <button onClick={this.props.test}>Save</button>
          </form>

        </div>
        return individ
      }else{
      const individ =
          <div className='Person'>
            <h2 >First Name: {this.props.first_name} </h2><br/>
            <h2>Last Name: {this.props.last_name}</h2>
            <h3> Age : {this.props.age}</h3>
            <img className='flag' src={`https://www.countryflags.io/${this.props.nat}/flat/64.png`}/>
            <img className='pic' src={this.props.picture} />
            <h3>email: {this.props.email}</h3>
            <button onClick={this.handleToggle}>edit</button>
          </div>

          return individ
        }
    }
  }


export default Person;

在第二个Person组件上单击“保存”后，先前（第一个）已编辑的组件（Person）应保持状态（在DOM上可见）并且不会消失，我丢失了什么？