Question

我对函数fetch有疑问。我尝试仅发送一个数字＆＃34; 1＆＃34;，我可以访问所有子组件中的这些数据，但在致电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的状态的属性。

顺便说一句，fetch必须在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;

一般来说，从道具设置状态被认为是不好的做法/反模式。

获取后，React数据不会转到子组件

2 个答案: