Почему запрос в react — вечный?

class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      form: {
        username: ''
      }
    }

    this.onFormSubmit = this.onFormSubmit.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  onFormSubmit(e) {
    e.preventDefault();

    this.props.getData();
  }

  handleChange(event) {
    const { form } = this.state;

    form.username = event.target.value;

    this.setState({ form });
  }

  render() {
    const { tweets } = this.state;

    return (
      <form onSubmit={this.onFormSubmit}>
        <p className="leadform-component-container">
          <input type="text" placeholder="Username" required onChange={this.handleChange} />
        </p>
        <p className="leadform-component-container">
          <input type="submit" value="Press me" />
        </p>
      </form>
    )
  }
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tweets: []
    };
  }

  getData() {
    axios.post('/', {
      username: this.state.username
    })
    .then(({data: tweets}) => {
      console.log(tweets)
      this.setState({ tweets });
    })
    .catch(console.error);
  }

  render () {
    const { tweets } = this.state;
    console.log(tweets.length);

    if (tweets.length > 0 && tweets[0].user) {
      console.log(tweets.length);
      return (
        <div>
          <header>
            <Form getData={this.getData()} />
          </header>
          <main>
            <User user={tweets[0].user} />
            {tweets.map((tweet, i) => <Tweet key={i} tweet={tweet} />)}
          </main>
        </div>
      );
    } else {
      return (
        <Form getData={this.getData()} />
      );
    }
  }
}