親子状態の変更後に子要素が反応しないようにします

Question

私は様々な子コンポーネントのデータを取り込むための素敵なApiWrapperコンポーネントを作ろうとしています。 https://jsfiddle.net/vinniejames/m1mesp6z/1/

class ApiWrapper extends React.Component { 

    constructor(props) { 
    super(props); 

    this.state = { 
     response: { 
     "title": 'nothing fetched yet' 
     } 
    }; 
    } 

    componentDidMount() { 
    this._makeApiCall(this.props.endpoint); 
    } 

    _makeApiCall(endpoint) { 
    fetch(endpoint).then(function(response) { 
     this.setState({ 
     response: response 
     }); 
    }.bind(this)) 
    } 

    render() { 
    return <Child data = { 
     this.state.response 
    } 
    />; 
    } 
} 

class Child extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     data: props.data 
    }; 
    } 

    render() { 
    console.log(this.state.data, 'new data'); 
    return (<span> { 
     this.state.data.title 
    } < /span>); 
    }; 
} 

var element = < ApiWrapper endpoint = "https://jsonplaceholder.typicode.com/posts/1"/> ; 

ReactDOM.render(
    element, 
    document.getElementById('container') 
); 

をしかし、何らかの理由で、子コンポーネントをするとき、親の状態の変更を更新していないようです。私が読んだすべてのものから、これは動作するはずです。

ここに何か不足していますか？

Answer 1

コードには2つの問題があります。

子コンポーネントの初期状態は、小道具から設定されています。このSO Answerから引用

this.state = { 
    data: props.data 
}; 

：getInitialState（我々の場合でconstuctor）メソッドのみが最初に呼び出されているためpropとしてコンポーネントにintial状態を渡す

抗パターン あります コンポーネントが描画される時刻。決してもっと。コンポーネントは、それがレンダリングされた最初の時からの状態 を維持しますので、あなたがいる場合 コンポーネントがpropとして異なる値を渡すことを再レンダリング、ということを意味し、コンポーネント は、それに応じて反応しなくなります。非常にエラーが発生しやすいです。

したがって、このような状況を回避できない場合は、componentWillReceivePropsメソッドを使用して新しい小道具を待ち受けることが理想的です。

子コンポーネントに以下のコードを追加すると、子コンポーネントの再レンダリングに関する問題が解決されます。

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

2番目の問題はfetchです。

_makeApiCall(endpoint) { 
    fetch(endpoint) 
    .then((response) => response.json()) // ----> you missed this part 
    .then((response) => this.setState({ response })); 
} 

そして、ここでの作業フィドルです：https://jsfiddle.net/o8b04mLy/

Answer 2

変更が必要なことがいくつかあります。

fetchが応答を受け取ると、それはjsonではありません。 私はこのjsonをどうやって得ることができるのかを探していましたが、これはlinkでした。

もう一方の側では、constructor関数が1回だけ呼び出されると考える必要があります。

したがって、<Child>のデータを取得する方法を変更する必要があります。 https://jsfiddle.net/emq1ztqj/

私はそれが役に立てば幸い：

ここで、私は、サンプルコードを残しました。