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

TypeError: Cannot read property 'id' of undefined

这是我的代码

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>
        )
    }
}