Реакция передачи данных ajax детям

Question

Как я могу передать дочерний компонент из родительских данных, запрошенных при вызове ajax? Например, у меня есть такой код

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  async componentDidMount() {
    const response = await fetch();

    this.setState(response.data);
  }

  render() {
    return (
        <ChildComponent data={this.state} /> // data={}
    );
  }
}

Проблема здесь в том, что ChildComponent будет монтироваться до того, как будут получены данные, поэтому я получу пустые данные объекта в ChildComponent.

Answer 1

Вы можете решить визуализировать детей, только если есть некоторые данные. Для этого, возможно, не заменяйте все состояние данными, а создайте отдельный ключ. Будет проще, если вам понадобится добавить какое-то другое состояние после.

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  async componentDidMount() {
    const response = await fetch();

    this.setState({ data: response.data });
  }

  render() {
    const { data } = this.state;
    return data ? <ChildComponent data={data} /> : null;
  }
}

Answer 2

Проверьте, доступны ли данные или нет

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  async componentDidMount() {
    const response = await fetch();

    this.setState(response.data);
  }

  render() { // Return if response is Object
    return Object.keys(this.state).length > 0
      ? <ChildComponent data={this.state} /> // data={}
      : <div>Loading...</div>
  }

  render() { // Return if response is Array
    return this.state.length > 0
      ? <ChildComponent data={this.state} /> // data={}
      : <div>Loading...</div>
  }
}