dmc1989
@dmc1989

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

Создал форму, но оказалось, что данные, которые она принимает с сервера нужны в 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()} />
      );
    }
  }
}
  • Вопрос задан
  • 89 просмотров
Решения вопроса 1
rockon404
@rockon404
Frontend Developer
Вы в методе 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);
  }
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
YLab Тольятти
от 70 000 до 130 000 руб.
ЭЛКОД Москва
от 120 000 руб.
Leningrad Media Санкт-Петербург
от 60 000 руб.