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

类型错误：无法读取未定义的属性“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>
        )
    }
}