ReactJS初心者の状態が更新されましたが、子どもにレンダリングされていません

Question

私はReactJSで初心者を持っていますので、私はものをテストしています。

静的なページをコンポーネントとして作成し、そのコンポーネントに別のカスタムコンポーネントを読み込みます。

データはajax呼び出しから取得されており、状態を更新しますが、子コンポーネントのビューは更新されません。

静的ページ

// Test.JS 
import React from 'react'; 
import Layout from '../../components/Layout'; 
import Article from '../../components/Article'; 
import s from './styles.css'; 
import axios from 'axios'; 

class Test extends React.Component { 

constructor(props) { 
    super(props); 
    this.state = { 
     article: null 
    }; 

} 

componentWillMount(){ 
    axios.get("https://gist.githubusercontent.com/koistya/a32919e847531320675764e7308b796a/raw/articles.json") 
     .then(function(result) { 
      var theArticle = result.data.filter((article) => article.title.split(' ').join('') === this.props.route.params.title.split(' ').join('')); 
      this.setState({ 
       article: theArticle[0] 
      }) 
     }.bind(this)); 
} 

render() { 
    return (
     <Layout className={s.content}> 
      <Article {...this.state.article} /> 
     </Layout> 
    ); 
} 

} 

export default Test; 

私はAJAX呼び出しで状態を更新しますが、子供が更新されません見ることができるように。アーティクル内のコンソールログには、最初に内部に何も表示されないため、nullオブジェクトが表示されます。しかし、状態を更新した後、私はそれが子どもにそれを渡す必要があります期待しています。

import React from 'react'; 
import Link from '../Link'; 

class Article extends React.Component{ 

    componentDidMount() { 
     console.log(this.props); 
     window.componentHandler.upgradeElement(this.root); 
    } 

    componentWillUnmount() { 
     window.componentHandler.downgradeElements(this.root); 
    } 

    render() { 
     return (
      <div className="demo-card-wide mdl-card mdl-shadow--2dp" ref={node => (this.root = node)}> 
       <div className="mdl-card__title"> 
        <h2 className="mdl-card__title-text">{this.props.author}</h2> 
       </div> 
       <div className="mdl-card__supporting-text"> 
       </div> 
       <div className="mdl-card__actions mdl-card--border"> 
       </div> 
       <div className="mdl-card__menu"> 
        <button className="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect"> 
         <i className="material-icons">{this.props.title}</i> 
        </button> 
       </div> 
      </div> 
    ); 
    } 

} 

export default Article; 

だから私は、次の質問があります。

1）まず最初に、私は正しい方向をつもりです、それが行われる必要がありますどのようにこのですか？ 2）コンストラクタはwillmountイベントよりも優れていませんか？ 2）なぜ今は子ビューを更新していないのですか？ 3）この場合は、Test.jsの小道具を使うべきですか？（まだ読んでも分かりません）

Answer 1

これをcomponentDidMountに変更してビューを更新しました。

私はそれが前に仕事をしなかった理由が分かりません！