Блог

Главная - Вопросы по программированию - Передача переменной в setState

Передача переменной в setState

#javascript #reactjs #setstate

#javascript #reactjs #setstate

Вопрос:

Я новичок в react. В моей программе пользователю предлагается нажать на кнопку, и в соответствии с этой кнопкой состояние изменяется.

Это отображаемый раздел:

 <button onClick={this.togglePage(2)}>Click Here</button>

Это часть перед:

   constructor(props) {
    super(props);
    this.togglePage = this.togglePage.bind(this);

    this.state = {
      currentpage: 1,
    };
  }
  togglePage(page) {
    this.setState({
      currentpage: page,
    });
  }

Правильно ли я передаю здесь значение? Я получаю сообщение об ошибке «Превышена максимальная глубина обновления»

Ответ №1:

Вам нужно передать функцию, а не вызывать ее немедленно

  <button onClick={() => this.togglePage(2)}>Click Here</button>

Как написано в данный момент, вы вызываете togglePage рендеринг, который вызывает обновление состояния и повторный запуск стека вызовов.

Комментарии:

1. О, я понимаю. это тоже происходит, даже если я не передаю значение? что-то вроде простого переключения (true / false) функции?

2. @DarkProfessor Если вы вызываете функцию вместо того, чтобы передавать ее как обратный вызов — тогда да. onClick={fn} — ок onClick={fn()} — не ок, если fn не возвращает новую функцию 🙂

3. Это становится излишним, если вы используете функции со стрелками в render . Если вам нужно создать несколько togglePage обратных вызовов с разными значениями, вы можете переписать свой код, создав makePageToggler(currentpage){ return () => this.setState({ currentpage })} и вызвав его onClick={this.makePageToggler(2)}

4. Вы этого не делаете. Этот оператор, как bind() следует из названия функции, используется для привязки имени togglePage контекста this к функции togglePage , которую вы реализовали. Впрочем, вы можете написать эту функцию следующим образом: togglePage = (page) => { ... } , и вам не понадобится никакая привязка

5. Обратите внимание, что в случае makePageToggler можно выполнить вызов, потому что он возвращает новую функцию.

Ответ №2:

еще одним подходом было бы не привязывать ее в конструкторе, вместо этого привязать ее к тегу button, как показано ниже,

 <button onClick={this.togglePage.bind(this,2)}>Click Here</button>