Почему деструктор работает с событиями, и не будет работать без него

Question

когда я использую этот код:

 onChange = e => {
  const { name, value } = e.target;
     this.setState(currentState => ({
      tempInput: { ...currentState.tempInput, [name]: value }
    }));
  };

все работает нормально, но когда я делаю это:

 onChange = e => {
     this.setState(currentState => ({
      tempInput: { ...currentState.tempInput, [e.target.name]: e.target.value }
    }));
  };

Я получаю ошибку: TypeError: e.target имеет значение null, в чем разница? я что-то упустил?

Answer 1

Потому что this.setState() - это asynchronous. Таким образом, e становится неопределенным при выполнении.

Чтобы смягчить его, вы можете уничтожить e в параметрах функции onChange, в которых name и value определены в пределах функциональной области onChange:

 onChange = ({ target: { value, name } }) => {
     this.setState(currentState => ({
      tempInput: { ...currentState.tempInput, [name]: value }
    }));
  };

Или ... вы можете уничтожить e.target перед выполнением this.setState(), что также сохраняет name и value, определенные в функциональной области onChange:

 onChange = e => {
     const { name, value } = e.target;
     this.setState(currentState => ({
      tempInput: { ...currentState.tempInput, [name]: value }
    }));
  };