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

Question

[Wasya UK]

Создал форму, но оказалось, что данные, которые она принимает с сервера нужны в App, в котором она и рендерится, чтобы отображать все новости после запроса. Я переделал, но теперь запрос постоянно повторяется. В чем проблема?

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()} />
      );
    }
  }
}

Answer 1

[Антон Спирин]

Вы в методе render не передаете метод getData, а вызываете его и передаете результат, который метод даже не возвращает. Исправить можно так:

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} /> 
      );
    }
  }
}

Заметьте что я пределал getData из метода класса в свойство класса. Теперь когда getData стрелочная функция, она не потеряет контекст при передаче в другой компонент. Альтернативным решением проблемы с потерей контекста при передаче метода, будет бинд этого метода в конструкторе:

constructor(props) {
    super(props);
    this.state = {
      tweets: []
    };

    this.getData = this.getData.bind(this);
  }

Comments

[Антон Спирин]

Wasya UK, во-первых принимайте аргумент в getData:

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

Во вторых передавайте его onSubmit:

onFormSubmit(e) {
    e.preventDefault();

    this.props.getData(this.state.form.username);
  }

[Wasya UK]

Антон Спирин, Да, спасибо я тоже заметил, и теперь пишет что this.setState({ tweets }); - не функция. В чем может быть проблема?

[Антон Спирин]

Wasya UK, вы точно переделали getData из метода класса:

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

в поле класса?:

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

Или сделали бинд метода в конструкторе?

[Wasya UK]

Антон Спирин, Действительно, заменил конструкцию на getData = username => { и заработало. Спасибо большое, очень помогли)