javascript - ReactJs:我的对象在构造函数获取数据之前呈现

Question

作为一个 ReactJs 初学者，我正在尝试编写一个简单的单页 Web 应用程序。我的目的是从 API 获取数据并将其显示在我的网页上，因此我需要获取 URL，将它们传递给我的子对象，然后让它们再次获取数据。

很明显，当 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}
          />
    );
}

这是可能的 child 之一:

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]],
          }));
      }
  });
}

尝试运行应用程序时，这些列表为空。值得注意的是，当在构造函数(或父级的渲染)中硬编码相同的 URL 时，构造将完美地工作。

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

Answer 1

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

2- 要在子组件中保留渲染，请在父组件中使用 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 调用，并在子组件中执行 fetch api，具体取决于该 fetch 调用的数据，并且在父组件获取之前调用获取了数据，子组件被渲染，子组件的 componentWillMount 被调用，因为子组件中的 fetch 调用不起作用。