我正在开发一个应用程序，在该程序中，我使用一个组件中的状态将变量值传递给另一个组件，然后在Navlink中传递变量值，然后将接收到的值加载到输入字段中，然后单击该其他组件中的Submit按钮对值进行处理。我的值被正确接收并在提醒它们时正确显示。但是当我单击提交按钮时，它给出了错误，指向构造函数

TypeError：无法读取未定义的属性“ id”

这是我的代码

class Parent extends React.Component{
    constructor(props) {
        super(props);
        this.state={id:2}
    }

    render(){
       return(
         <NavLink 
           to={{
             pathname: '/Child',
             state: {
               id: this.state.id
             }
           }}
         >
           Edit
         </NavLink>
       )
    )
}

我在哪里获得价值

class Child extends React.Component{
    constructor(props) {
        super(props);

        this.state = {id:this.props.location.state.id}
        alert(this.props.location.state.id)//works fine
    }

    setId(e){
        this.setState({id:e.target.value})
    }

    addOrEdit(){ //gives error    
        alert(this.state.id) 
        //do something    
    }

    render(){
        return(
          <div>
            <form>
              <label>Id</label>
              <input value={this.state.id} onChange={this.setId.bind(this)}  type="text"/><br/>
              <input type="submit" onClick={this.addOrEdit.bind(this)} ></input>
            </form>
          </div>
        )
    }
}