React Onchange将最后更新的状态添加到另一个状态数组

Question

我正在创建一个包含很少输入字段的表单

render(){
 return (
      <Input.Group size="large">
      <Row gutter={8}>
       <Col span={4}>
        <Input placeholder="OS IP" name="os_ip" value={os_ip} onChange={this.changeHandler}  />
       </Col>
       <Col span={4}>
        <Input placeholder="OS Username" name="os_username" value={os_username} onChange={this.changeHandler}/>
       </Col>
       <Col span={4}>
        <Input placeholder="OS Password" name="os_password" value={os_password} onChange={this.changeHandler}/>
       </Col>
    )
}

我有一个全局数组，并且输入字段已在状态中初始化

state{
 os_ip:'',
 os_username:'',
 os_password:'',
 data:[]
} 

现在onChange尝试更新输入字段的状态并将其推送到data数组

changeHandler = (e: any) => {
    this.setState({[e.target.name]:e.target.value});
    this.setState({ data: [...this.state.data, ...[{"key":e.target.name,"value":e.target.value}] ] })

  }; 

现在，如预期的那样，它将为onchange数组中的同一输入data添加多个值。只是想了解（因为React和Typescript世界中的新功能），什么是最好的/推荐的处理方式，否则我必须做一下粗略的处理。