ReactJS «ссуды» не определен после того, как компонент «проп» обновляются

Question

У меня есть следующий компонент

class DataEntryAndResearch extends React.Component<any, any>{ 
    render() { 
     return (
      <form className="task-form" 
       {this._possibleQuestions()[this.props.currentQuestion]} 
      </form> 
     ); 
    } 

    componentDidUpdate() { 
     console.log(this); 
     console.log(this.refs.formInput); 
    } 

    _possibleQuestions() { 
     return ([ 
      <div> 
       <FormInput 
        placeholder="Email" 
        ref="formInput" 
       /> 
      </div> 
     ]) 
    } 
} 

В коде выше, я весь этот прикрепить ref ("formInput") в пределах FormInput компонента. Затем я пытаюсь увидеть ссылку formInput в моей консоли, выведя ее в методе componentDidUpdate.

Проблема заключается в следующем. Когда компонент сначала получает визуализированный, this.refs.formInput выводит ожидаемый объект (<FormInput />), но когда this.props.currentQuestion получает обновление, formInput ref получает протирание. Каждый раз, когда я пытаюсь вывести formInput, он возвращает «undefined». Я не уверен, что происходит:/

Answer 1

Вы должны bind функцию с this.

Попробуйте следующее.

constructor(props) { 
    super(props) 
    this._possibleQuestions = this._possibleQuestions.bind(this) 
} 

Добавьте это в ваш class