キャッチされない例外TypeError：</p> <blockquote> <p>Uncaught TypeError: Cannot read property 'setState' of null.</p> </blockquote> <p>を基本的に私はあるやろうとしています、ユーザーがクリックすることができます：私が述べた反応の使用に新たなんだと問題に遭遇してきたヌル

Question

のプロパティ「SETSTATE」を読み取ることができません3つの異なる見出しをクリックすると、その見出しに固有の特定のテンプレートがレンダリングされます。これは私にこのエラー与えた私が現在使用しているコードです：さらに

class Selection extends React.Component { 

constructor(props) { 
    super(props); 
    this.state = {selections: [], donateActive: true, fundraiseActive: false, speakActive: false }; 
} 

componentDidMount() { 
    this.setState({ 
     selections: selectionData.selections 
    }) 
} 

componentWillUnMount(){ 
    console.log("unmounted!"); 
} 

donateOnClick() { 
    this.setState({ donateActive: true, fundraiseActive: false, speakActive: false}); 
} 

fundraiseOnClick() { 
    this.setState({ fundraiseActive: true, donateActive: false, speakActive: false}); 
} 

speakOnClick() { 
    this.setState({ speakActive: true, fundraiseActive: false, donateActive: false}); 
} 

donateTemplate() { 
    return (
     <div> 
      <h1>donate template</h1> 
     </div> 
    ) 
} 

fundraiseTemplate() { 
    return (
     <div> 
      <h1>fundraise template</h1> 
     </div> 
    ) 

} 

speakTemplate() { 
    return (
     <div> 
      <h1>speak template</h1> 
     </div> 
    ) 
} 

render() { 
    return(
     <div> 
      <div className="col-sm-6 col-sm-push-6 right"> 
       <div className="right-content-container"> 
        <div className="selections"> 
         <h3>You can</h3> 
         <h1 onClick={this.donateOnClick} className="selection active" id="selection-donate">donate</h1> 
         <h1 onClick={this.fundraiseOnClick} className="selection" id="selection-fundraise">fundraise</h1> 
         <h1 onClick={this.speakOnClick} className="selection" id="selection-speak">speak up</h1> 
         <hr></hr> 
        </div> 
        <div> 
         { 
          if (this.state.donateActive) { 
           this.donateTemplate() 
          } 
          if (this.state.fundraiseActive) { 
           this.fundraiseTemplate() 
          } 
          if (this.state.speakActive) { 
           this.speakTemplate() 
          } 
         } 
        </div> 
       </div> 
      </div> 
      <div className="col-sm-6 col-sm-pull-6 left"> 
       <div className="left-content-container"> 
        <img className="img-responsive hidden-xs" src="./images/selections/.jpg" alt=""/> 
        <img className="img-responsive hidden-sm hidden-md hidden-lg" src="./images/selections/.jpg" alt=""/> 
       </div> 
      </div> 
     </div> 
    ); 
} 


} 

を、私は内部の今return()の内側に私がやっている方法をIFステートメントを使用することができていますかどうかわからないんだけどrender()メソッドは、これを行うための良い方法はありますか？

ご協力いただければ幸いです。

Answer 1

あなたの問題は、thisバインディングに関連しています。 Reactは、コンストラクタとライフサイクルのメソッドを除き、Reactコンポーネントをthisの値に自動的にバインドしません。文が{}に包まれている場合は、あなたがそれらを使用することができますように、この問題を解決するには、あなたのコンストラクタで、限り、あなたはifの文の質問については

constructor(props) { 
    super(props); 
    this.donateOnClick = this.donateOnClick.bind(this); 
    // other function bindings 
} 

ためthisをバインドする各機能のためにこれを追加します。中括弧はJSXパーサに、その内部のものはjavascriptとして評価されるべきであることを示しているので、有効なjavascriptをその内部に配置することができます。

UPDATE：これらif文が予期しないトークンエラーを投げますが、これを試している理由はわからない：三if文を使用しています

<div> 
    { this.state.donateActive ? this.donateTemplate() : null } 
    { this.state.fundraiseActive ? this.fundraiserTemplate() : null } 
    { this.state.speakactive ? this.speakTemplate() : null } 
</div> 

。構文に慣れていない場合：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

それでも解決しない場合は、より詳細なエラーメッセージで質問を更新してください。特に、私はそれを言っているトークンものを見るために好奇心旺盛になるだろうと、あなたは、このようにそれらを宣言する場合にも、あなたのクラスであなたの方法を自動バインドすることができます

Answer 2

予期せぬことである：

donateOnClick =() => { 
    this.setState({ donateActive: true, fundraiseActive: false, speakActive: false}); 
} 

fundraiseOnClick =() => { 
    this.setState({ fundraiseActive: true, donateActive: false, speakActive: false}); 
} 

speakOnClick =() => { 
    this.setState({ speakActive: true, fundraiseActive: false, donateActive: false}); 
} 

の