ReactJS. - Почему это работает в ReactJS, а не наоборот?

Question

Привет. Я пытаюсь понять, почему этот конкретный код работал, а мой предыдущий код не работал.

Я предоставил оба фрагмента ниже:

КОД РАБОТЫ:

handleInputChange = (e) => {
      let { value } = e.target;
      this.setState(state => { return ({searchField : value}) }, () => console.log("new state is ", this.state.searchField))
  }

НЕ РАБОТАЮЩИЙ КОД: ошибка, которую я получаю здесь: cannot read property value of null.

handleInputChange = (e) => {
      this.setState(state => { return ({searchField : e.target.value}) }, () => console.log("new state is ", this.state.searchField))
  }

ЭТО МЕТОД ПОДАЧИ, КОТОРЫЙ ОБЩИЙ ОБА:

  render() {
    let { monsters, searchField } = this.state;

    const filteredMonsters = monsters.filter((monster) => {
        return monster.name.toLowerCase().includes(searchField.toLowerCase());
    })

    return (
        <div className="App">
            <input type="search" placeholder="Monster Name" onChange={this.handleInputChange}/>
          <CardList monsters={filteredMonsters}/>
        </div>
    );

Может кто-нибудь объяснить, почему работает синтаксис деструктурирования?

Спасибо!

Answer 1

Это событие Syntheti c, которое передается обработчикам событий. Из документов :

SyntheticEvent объединяется в пул. Это означает, что объект SyntheticEvent будет повторно использован и все свойства будут аннулированы после вызова обратного вызова события. Это из соображений производительности. Таким образом, вы не можете получить доступ к событию асинхронным способом.

function onClick(event) {
  console.log(event); // => nullified object.
  console.log(event.type); // => "click"
  const eventType = event.type; // => "click"

  setTimeout(function() {
    console.log(event.type); // => null
    console.log(eventType); // => "click"
  }, 0);

  // Won't work. this.state.clickEvent will only contain null values.
  this.setState({clickEvent: event});

  // You can still export event properties.
  this.setState({eventType: event.type});
}

Примечание :

Если вы хотите получить доступ к свойствам события асинхронно, вы должны вызвать event.persist() для события, которое удалит событие syntheti c из пула и позволит удерживать ссылки на событие в пользовательском коде.

Answer 2

Поскольку один, setState является асинхронным, а два, React повторно использует синтетические c объекты событий. Следовательно, значение e, когда обратный вызов setState выполняется , не обязательно должно быть (и, по-видимому, нет) таким же, как когда само setState называется .

const value = e.target.value; this.setState( // use the value primitive here должно работать так же хорошо.