componentWillReceiveProps not firing

Question

私の他のクラスでは、componentWillReceivePropsはうまく機能していましたが、何らかの理由でここでは起動しません。

ItemView.jsx

class ItemView extends React.Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
      name: null, 
      rating: null, 
      sector: null, 
      location: null, 
      description: null, 
      image: "blank.png", 
      show: false 
     }; 
    } 

    ... 

    componentWillReceiveProps(nextProps) { 

     if(!nextProps.companyToRender) { 
      this.setState({ 
       name: null, 
       rating: null, 
       sector: null, 
       location: null, 
       description: null, 
       image: "blank.png", 
       show: false 
      }); 
     } 
     else { 
      var companyToRender = nextProps.companyToRender; 

      this.setState({ 
       name: companyToRender.name, 
       rating: companyToRender.rating, 
       sector: companyToRender.sector, 
       location: companyToRender.location, 
       description: companyToRender.description, 
       image: companyToRender.image, 
       show: true 
      }); 
    } 

    ... 

    render() { 
     return(
     <div> 
     ... 
     <CommentBox show={this.state.show} companyToRender={this.state.name}/> 
     ... 
     </div> 
     ); 

    } 
} 

CommentBox.jsx

class CommentBox extends React.Component { 
    constructor(props) { 
     super(props); 
     this.state = {companyToRender: null}; 
    } 

    componentWillReceiveProps(nextProps) { 
     this.setState({companyToRender: nextProps.companyToRender}); 
    } 

    ... 
} 

何も渡されていない、またはItemViewがそれに代入されているアレイ場合itemViewに渡される支柱のいずれかヌルです。

componentWillReceiveProps（）は、状態の属性がnullになったときにのみ発生し、設定されていないときに発生します。 （（null - > entry）は動作しませんが、（entry - > null）は機能します）。

何かが欠落していますか？ありがとう！

- 編集：

（ヌル - >エントリ）の更新状態が、ログまたはそれ以降のcomponentWillRecievePropsを呼び出すことはありません（）。 （ただし、エントリ - >ヌルはありません。）

Logs for null --> entry

Logs for entry --> null

Answer 1

がずっと痛いデバッグした後、私は問題がItemViewが（反応-ブートストラップ）モーダル内部で呼び出されていたということであったことが分かりました何らかの理由で、componentWillRecieveProps（）をサポートしていません。コードをリファクタリングして問題を修正しました。みんなありがとう！

Answer 2

私も同じ問題がありました。誰かが直接URLを入力した場合、そのコンポーネントのアクセスポイントは起動しませんでした。私はすべての作業をするために私のコードをリファクタリングしなければなりませんでした。私が作った

の変更（すなわち、外側の要素としてルータを持っている）のようなものを持つ私の最初のindex.tsxにあった：

render( 
 
<Router history={hashHistory} > 
 
{routes} 
 
</Router> 
 
, document.getElementById('root'));

私のデフォルトルートは私のapp.tsxにしました構造のページを次のよう レンダリング（）{

return (
<Provider store={store}> 
    <div id="appContainer"> 
      {this.props.children} 
    </div> 
</Provider> 
); 

}

Answer 3

誰がこれで問題が発生している場合は、以前とまったく同じ小道具を受信して​​いる場合...

componentWillReceivePropsは呼び出されませます。あなたはそれを回避するために行うことができますすることで、コンポーネントが内部で何とか

click() { 
    this.setState({counter: ++this.state.counter, unchangingProp:true}) 
} 
<Component unchangingProp={this.state.unChangingProp} counter={this.state.counter}/> 

componentWillRecievePropsをするたびにトリガされます。この方法で自分自身をリセットした場合にコンポーネントに同じ小道具を送信するたびに反復処理ダミー小道具を追加することです。