反應數據在獲取後不會轉到子組件

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要執行，見https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/

Answer 2

的問題是，在你的Results，您只使用從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; 

一般來說它被認爲是不好的做法/反模式從道具設置狀態。