React. Проблема с передачей event-объекта при обновлении стейта в input'e
 

Изучаю реакт неделю и столкнулся со следующей проблемой (ссылка на CodePen).

Есть два инпута - имейл и пароль. В них есть один обработчик осбытия onChange. В нем при каждом изменении value происходит обновление стейта компонента. И проблема заключается в том, что если обновлять стейт через функцию

handleChange = (e) => {
    this.setState(state => ({
      ...state,
      [e.target.type]: e.target.value,
    }));
 }

то, почему-то появляется ошибка "Cannot read property 'type' of null". Т.е. объект события передается с пустыми свойствами.

Однакому если деструктуризовать объект события, то всё работает

const { target } = { ...e };

this.setState(state => ({
  ...state,
  [target.type]: target.value,
}));

или так

const { target } = { ...e };
const { type } = target;
const { value } = target;

this.setState(state => ({
  ...state,
  [type]: value,
}));

Если менять стейт не в функциональном стиле, то объект события имеет правильные свойства

this.setState({
    ...this.state,
    [e.target.type]: e.target.value,
});

Вопрос: почему без структуризации, функция которая обновляет стейт получает объект события с пустыми полями. Деструтурированный объект traget (и его деструктурированные свойства) и объект e находятся же в одной области видимости. Что я упускаю?

Если можете распишите, пожалуйста, максимально подробно. Я только учусь и могу не знать очевидные для опытных программитов вещей.

Хороший вопрос %)

http://www.ecma-international.org/ec...ics-evaluation

An ArrowFunction does not define local bindings for arguments, super, this, or new.target. Any reference to arguments, super, this, or new.target within an ArrowFunction must resolve to a binding in a lexically enclosing environment...

SuperZen,
За ссылку, спасибо, но всё равно не понимаю. То ли не хватает понимания английского, то ли просто не понимаю того, как это объясняется в источнике. Что значит "Стрелочная функция не определяет локальной привязки для arguments(иммется ввиду список агрментов, не объект же arguments?), super, this, or new.target.". Как это не определяет, если тут

let f = (outerArg) => {
    let fInner = (innerArg) => {
        console.log(outerArg);
        console.log(innerArg);
    }
    fInner('inner arrowFunc argument');
}
f('outer arrowFunc argument');

чудесно выведется в консоль и outerArg и innerArg;

хз что там внутри, делает реакт, может быть копию ) ф-ции... если только в IIFE завернуть

class App extends Component {

  state = {
    one: 1
  }

  onChange = (e) => {
    this.setState(((state) => {
      return ({ [e.target.name]: e.target.value })
    })(), () => console.log(this.state))
  }

  render() {
    return (
      <div className="App">
        <input type="text" name="one" value={this.state.one} onChange={this.onChange} />
      </div>
    );
  }
}

setState внутри...

setState<K extends keyof S>(
            state: ((prevState: Readonly<S>, props: Readonly<P>) => (Pick<S, K> | S | null)) | (Pick<S, K> | S | null),
            callback?: () => void
        ): void;

SuperZen,
нашел ответ, но всё равно не понимаю, как мы можем получить доступ к "правильным" свойствам объекта, после того, как они были обnullены.

как видим, что если вызвать ф-цию внутри this.setState, что она не имеет доступ к аргументам вызывающей ф-ции, тут либо надо согласиться с условиями, где она была вызвана, либо долго думать ) почему не так, есть варик, что происходит переопределение методов объекта, а как на самом деле, очень надо долго погружаться в обстоятельства, когда это было написано...