Как правильно установить состояние в React?

Question

Честно говоря, это мой первый день в ReactJS. Я учу некоторые мелкие мелочи, такие как state. Я создал небольшую программу для кнопки переключения. Он просто отобразит «Привет, мир!» или ничего не отображать при переключении кнопки. Есть одна вещь, которую я не понял. Мой код выдает ошибку при использовании этого синтаксиса:

  toggleHandler() {
    const currentStatus=this.state.display;
    this.setState({
      display: !currentStatus
    })
  }

this.state не определено

Но тот же код работает отлично, если я изменяю синтаксис на функция жирной стрелки:

  toggleHandler=()=> {
    const currentStatus=this.state.display;
    this.setState({
      display: !currentStatus
    })
  }

Я не буду тратить ваше время. Я создал stackblitz . Эксперты по inte rnet говорят, что любой вызов this.setState() является асинхронным. Поэтому я попытался использовать call back function и IIFE, но я запутался и стал слишком сложным. Пожалуйста, поправьте меня. Извините, это очень дурацкий sh вопрос.

Answer 1

Есть несколько способов.

Один из них - добавить в конструктор. ES6 React.Component не привязывает методы автоматически к себе . Вы должны связать их сами в конструкторе. Вот так

this.toggleHandler = this.toggleHandler.bind(this);

Еще одна функция стрелок toggleHandler = (event) => {...}.

И еще есть onClick={this.toggleHandler.bind(this)}

ссылка

Answer 2

Как вы можете использовать функции и предыдущее состояние.

1- Связывание в конструкторе

constructor() {
    this.toggleHandler=this.toggleHandler.bind(this);
  }

может быть определено следующим образом

  toggleHandler=()=>{
    this.setState(prev=>({
      display: !prev.display
    }))
  }

2-функция стрелок (не нужно связывать в конструкторе)

  toggleHandler=()=>{
    this.setState(prev=>({
      display: !prev.display
    }))
  }

3- Встроенное связывание

<Button onClick={this.toggleHandler.bind(this)}>Toggle</Button>

код функции

  toggleHandler=()=>{
    this.setState(prev=>({
      display: !prev.display
    }))
  }

4- Встроенная функция стрелки

 <Button onClick={()=>this.toggleHandler()}>Toggle</Button>

код функции

  toggleHandler=()=>{
    this.setState(prev=>({
      display: !prev.display
    }))
  }

Примечание - Рекомендуется избегать встроенных функций для повышения производительности

Answer 3

В сообщении об ошибке говорится, что объект this не содержит свойства с именем state. Что именно означает this, так это постоянный источник путаницы в JS, за исключением случаев, когда внутри функции стрелки. Внутри функции стрелки this всегда ссылается на контекст, в котором появляется функция стрелки.

Проблема здесь в первом примере, this относится к контексту, отправляемому обработчику событием onClick. Этот контекст не содержит свойства state. Однако внутри функции стрелки ключевое слово this будет ссылаться на класс JavaScript, в котором существует ваша функция стрелки. Этот класс имеет свойство state.

Кому чтобы обойти это, вы можете использовать bind (который выводит копию вашей функции с контекстом, установленным для того, что вы предоставляете ей. Или просто использовать функции стрелок. Если бы это был я, я бы выбрал последний подход, поскольку лучше определенное и более согласованное поведение внутри функции стрелки. Если вы хотите использовать bind, вы должны сделать это в объявлении обработчика событий следующим образом:

onClick={this.toggleHandler.bind(this)}

Answer 4

Да, любой вызов setState является асинхронным. Вы можете проверить свой журнал, что он меняет свой статус, но не манипулировать домом. Для манипулирования dom. Любой асинхронный вызов должен выполняться через функцию обратного вызова.

Вы можете связать любое состояние с помощью этой функции стрелки или this.state.bind (this).