javascript - 获取后 react 数据不会转到子组件

Question

我在使用函数 fetch 时遇到问题。我试图只发送一个数字，例如“1”，并且我可以在所有子组件中访问此数据，但在调用 fetch 后，我无法再访问此数据。

应用程序.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;

内容.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;

结果.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/