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

を持って、私はすべてがFormInputコンポーネント内ref（"formInput"）を取り付けてあります。私はformInput refを私のコンソールのcomponentDidUpdateメソッドで出力してみようとします。

問題は次のとおりです。コンポーネントが最初にレンダリングされると、this.refs.formInputは期待オブジェクト（<FormInput />）を出力しますが、this.props.currentQuestionが更新されると、formInput refが消去されます。 formInputを出力しようとするたびに、「未定義」が返されます。何が起きているのかわかりません。/

Answer 1

の場合は、thisの機能が必要です。

以下を試してください。

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

の内側にこれを追加あなたのclass