获取数据后，异步响应渲染组件

Question

I need to render a component after data is fetched. If try to load data instantly, component gets rendered but no data is show.

class App extends React.Component {
  //typical construct

  getGames = () => {
    fetch(Url, {})
      .then(data => data.json())
      .then(data => {
        this.setState({ links: data });
      })
      .catch(e => console.log(e));
  };

  componentDidMount() {
    this.getGames();
  }

  render() {
    return (
      <div className="App">
        <Game gameId={this.state.links[0].id} /> //need to render this part
        after data is received.
      </div>
    );
  }
}

Answer 1

You can do like this using short circuit.

{
  this.state.links && <Game gameId={this.state.links[0].id} />
}

Answer 2

You could keep an additional piece of state called eg isLoading , and render null until your network request has finished.

Example

class App extends React.Component {
  state = { links: [], isLoading: true };

  getGames = () => {
    fetch(Url, {})
      .then(data => data.json())
      .then(data => {
        this.setState({ links: data, isLoading: false });
      })
      .catch(e => console.log(e));
  };

  componentDidMount() {
    this.getGames();
  }

  render() {
    const { links, isLoading } = this.state;

    if (isLoading) {
      return null;
    }

    return (
      <div className="App">
        <Game gameId={links[0].id} />
      </div>
    );
  }
}

Answer 3

Can we use the pattern of "Render-as-you-fetch" to solve the problem. Using a flag to check whether loading is complete doesn't look like a clean solution..