ReactJs：我的 object 在构造函数获取数据之前呈现

Question

作为一个 reactJs 初学者，我正在尝试编写一个简单的 single-page webapp。我的目的是从 API 中获取数据并将其显示在我的网页上，因此我需要获取 URL 的数据，将它们传递给我的 children objects，然后让他们再次获取数据。

所以 apparent只有 children 的渲染在 URL 的获取仍在进行时开始。

class App extends Component {
  constructor(props) {
      super(props);
      this.state = {
          title: '',
          events: '',
          people: '',
      };
  }
  componentWillMount(){
    fetch('http://example.org/').then(response => response.json())
    .then(json => this.setState({
      title: json.title,
      events: json.events,
      people: json.people,
    }))
  }

render(){
   return (
      <div>
          <Child
            url= {this.state.events}
          />
          <Child
            url= {this.state.people}
          />
    );
}

这是其中一种可能 children:

class Child extends Component {
   constructor(props) {
      super(props);
      this.state = {
          collection: [],
      };
  }
    componentWillMount(){
      fetch(this.props.url, {
          method: 'GET',
          headers: {
              Accept: 'application/json',
          },
        },
      ).then(response => {
      if (response.ok) {
          response.json().then( json => this.setState({
              collection: json[Object.keys(json)[0]],
          }));
      }
  });
}

尝试运行应用程序时，这些列表为空。值得注意的是，当在构造函数（或 parent 的渲染器）中硬编码相同的 URL 时，构造将完美运行。

所以我的问题是，有没有什么方法可以让我的渲染等待我的提取完成，或者有其他方法可以解决这个问题？

Answer 1

1- 使用 componentDidMount 生命周期方法来获取数据而不是 componentWillMount。

2-要在子组件中保存rendering，在父组件中使用一个bool，它会告诉你数据是否已成功获取的状态。

使用这个：

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            title: '',
            events: '',
            people: '',
            isDataFetched: false
        };
    }
    componentDidMount(){
        fetch('http://example.org/')
          .then(response => response.json())
          .then(json => this.setState({
              title: json.title,
              events: json.events,
              people: json.people,
              isDataFetched : true
          }))
    }

    render(){
        if(!this.state.isDataFetched) return null;
          return (
              <div>
                  <Child
                    url= {this.state.events}
                  />
                  <Child
                    url= {this.state.people}
                  />
              </div>
          );
    }
}

Why your code is not working?

componentWillMount 方法在渲染之前只被调用一次，您正在父组件中进行 api 调用，并根据该获取的数据在子组件中进行获取 api调用，并且在父提取调用提取数据之前，子组件被渲染并且子组件的 componentWillMount 被调用，因此子组件中的提取调用不起作用。

ReactJs：我的 object 在构造函数获取数据之前呈现

ReactJs: My object renders before the constructor fetches data

javascript

fetch

reactjs