React Updater功能不起作用。 常规setState不知何故？ （无法读取null的属性“名称”）

Question

Today I learned about updater functions, and that it's better to use them, because of React 16's fibre core.

Here is the code that doesn't work:

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

And here is the code that DOES somehow work:

  handleChange(e) {
    this.setState({[e.target.name]: e.target.value});
  }

I did bind the function in the constructor like this:

this.handleChange = this.handleChange.bind(this);

And the input I call handleChange in looks like this:

  <input
    className="todo-input"
    type="text"
    name="newTodo"
    value={this.state.newTodo}
    onChange={this.handleChange}
  />

For some reason, in the second version, React throws the following error:

Uncaught TypeError: Cannot read property 'name' of null

Can somebody explain to me please what's wrong with my code?

PS: I learned about updater functions from this blogpost.

Answer 1

Try use this:

handleChange(e) {
  e.persist();

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

}

or this:

handleChange(e) {

  const value = e.target.value;
  const name = e.target.name;

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

}