问在react js中更新表单并不能跟踪所有属性的状态

EN

#class Parent#

    import React from "react";
    import "./styles.css";
    import Child from "./child";

    class Parent extends React.Component {
      constructor() {
        super();
        this.state = {
          data: {
            username: ["mar"],
            name: [null]
          }
        };
      }
      updateToApi(data) {
        var username: data.username;
        var name: data.name;
      }

      render() {
        return (
          <Child data={this.state.data} updateToApi={this.updateToApi.bind(this)} />
        );
      }
    }
    export default Parent;


##class Child##
    import React from "react";
    import "./styles.css";
    import { Button } from "react-bootstrap";

    class Child extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          username: "",
          name: ""
        };
      }

      handleSubmit = e => {
        e.preventDefault();
      };

      handleChange = e => {
        const data = { ...this.state };
        data[e.currentTarget.name] = e.currentTarget.value;
        this.setState({ data });
      };

      render() {
        return (
          <>
            <form onSubmit={this.handleSubmit}>
              <label>
                Username:
                <input
                  type="text"
                  name="username"
                  value={
                    this.props.data.username !== "undefined"
                      ? this.props.data.username
                      : this.state.username
                  }
                  onChange={this.handleChange}
                />
              </label>
              <b />

              <label>
                Name:
                <input
                  type="text"
                  name="Name"
                  value={
                    this.props.data.name !== "undefined"
                      ? this.props.data.name
                      : this.state.name
                  }
                  onChange={this.handleChange}
                />
              </label>
              <br />
              <Button variant="primary" onClick={this.props.updateToApi} />
            </form>
          </>
        );
      }
    }
    export default Child;