フェッチ後にデータが子コンポーネントに移動しない

Question

機能に問題がありますfetchです。私は "1"のような数字だけを送信しようとしていますが、すべての子コンポーネントでこのデータにアクセスできますが、fetchを呼び出した後、このデータにアクセスできなくなりました。

App.jsx：

import React, { Component } from 'react' 
import './App.css'; 
import fetch from 'isomorphic-fetch' 
import Header from './Header' 
import Content from './Content' 
import Footer from './Footer' 


class App extends Component { 
    constructor(props) { 
     super(props) 

     this.state = { 
     stripdata: null 
     } 
    } 
    componentWillMount() { 
     fetch(`http://localhost:3000/data/info.json`) 
       .then(results => results.json()) 
       .then(data => { 
       this.setState({ 
        stripdata: data 
       }) 
       // console.log(this.state.stripdata) 
       }) 
       .catch(err => { 
       console.log("Didn't connect to API", err) 
       }) 
    } 
    render() { 
     // console.log(this.state.stripdata) 
     return (
      <div className="App"> 
      <Header onQuery={1}/> 
      { 
       (this.state.data === null) ? <div className="loading">Loading data...</div> : <Content onResult={this.state.stripdata}/> 
      } 
      <Footer /> 
      </div> 
     ); 
    } 
} 

export default App; 

Content.jsx：

import React, { Component } from 'react' 
import Result from './Result' 

class Content extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
     stripdata: this.props.onResult 
     }; 
    } 
    componentWillMount() { 

    } 
    render() { 
     console.log("im an Content: " + this.state.stripdata) 
     return (
      <div className="Content"> 
      <Result stripdata={ this.state.stripdata }/> 
      </div> 
     ); 
    } 
} 

export default Content; 

Result.jsx：

import React, { Component } from 'react' 
import PersonCard from './PersonCard' 

class Result extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
     stripdata: this.props.stripdata 
     }; 
    } 
    componentWillMount() { 

    } 

    render() { 
     console.log("im the Result: " + this.state.stripdata) 
     return (
      <div className="result"> 
      <PersonCard /> 
      </div> 
     ); 
    } 
} 

export default Result; 

助けてください。これは私の進歩を妨げている。

Answer 1

は、ここでの問題を修正：

<Header onQuery={1}/> 
     { 
      (this.state.stripdata === null) ? <div className="loading">Loading data...</div> : <Content onResult={this.state.stripdata}/> 
     } 

あなたが名前stripdataと状態のプロパティをチェックする必要があります。あなたは状態に設定し、コンストラクタで：

そして、ところで、フェッチがComponentDidMountで実行する必要があり、問題はあなたのResultsに、あなたは一度だけpropsからの値を使用している、ということであるhttps://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/

Answer 2

を参照してください。

stateで値をpropsから設定しないでください。代わりに、小道具を直接使用してください。以下のようにResultを変更し、それが適切に動作します：

import React, { Component } from 'react' 
import PersonCard from './PersonCard' 

class Result extends Component { 
    constructor(props) { 
     super(props); 
     // removed setting state from props.stripdata 
    } 

    render() { 
     console.log("im the Result: " + this.props.stripdata) // <-- using props! 
     return (
      <div className="result"> 
      <PersonCard /> 
      </div> 
     ); 
    } 
} 

export default Result; 

を一般的にそれは小道具から状態を設定するアンチパターン/悪い習慣と考えられています。