Не удается прочитать свойство 'someProperty' из неопределенного в реакции

Question

Я работаю над приложением, в котором я передаю значения переменных в Navlink, используя состояние из одного компонента в другой, а затем загружаю полученные значения в поля ввода и нажимаю кнопку подтверждения в этом другом компоненте, чтобы что-то делать со значениями. Мои значения получены правильно и отображаются правильно, когда я их предупреждаю. Но когда я нажимаю кнопку отправки, выдает ошибку, указывая на конструктор

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

Answer 1

---

 this.state = {id: this.props.location && this.props.location.state && this.props.location.state.id}

---

Следует устранить проблему, вызванную временами, когда этот компонент вызывался без этого контекста или эта строка выполнялась до установки location. (при условии, что вы используете withRouter для создания реквизитов местоположения ...)

В любом случае, и не имеет прямого отношения к вашей проблеме, плохая практика - устанавливать начальное значение для состояния из реквизита в конструкторе, подумайте о манипулировании состояние через жизненный цикл, либо не используйте здесь состояние и обращайтесь непосредственно к реквизитам

Answer 2

Я бы предложил просто использовать функции стрелок для setId и addOrEdit.

addOrEdit = (e) => {
    // ...
}

И просто вызывать их:

onChange={this.setId}
onClick={this.addOrEdit}

https://medium.com/@machnicki / handle-events- in-реакции-with-arrow-functions-ede88184bbb

Также вы выводите состояние из проп. Лучше просто использовать опору напрямую.

https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html