Почему при обновлении state, массив приравнивается к null?

Question

[Алексей Милютин]

Добрый день, не могу никак понять по какой причине в массив записывается значение null?
В инпут пишу любые слова и цифры, все равно выдает что значение массива null

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      todoValue: ['london']
    };
  }
  render() {
    return (
      <div className="body-container">
        <h1>To Do List</h1>
        <input type="text" onKeyDown={this.handleSubmit}/>
        <ul>
          {this.state.todoValue.map(item => (
            <Li text={item}/>
          ))}
        </ul>
      </div>
    )
  }
  
  handleSubmit = (e) => {
    if (e.keyCode === 13) {
      console.log('success');
      this.setState(prevState => ({
        todoValue: [...prevState.todoValue, e.target.value]
      }));
      e.target.value = '';
    }
  }
}

Answer 1

[Антон Спирин]

У вас не массив приравнивается к null, а на момент вызова колбека, передаваемого в setState, SyntheticEvent перестает существовать.
У вас два варианта:
1. Записать значение e.target.value в переменную и передавать в колбек переменную:

handleSubmit = e => {
  if (e.keyCode === 13) {
    const { value } = e.target;

    this.setState(prevState => ({
      todoValue: [...prevState.todoValue, value],
    }));
    e.target.value = '';
  }
};

2. Использовать event.persist(), но тогда изменять значение e.target.value надо в колбеке setState, иначе вы перепишите значение раньше его сохранения в state:

handleSubmit = e => {
  if (e.keyCode === 13) {
    e.persist();

    this.setState(
      prevState => ({
        todoValue: [...prevState.todoValue, e.target.value],
      }),
      () => {
        e.target.value = "";
      }
    );
  }
};

Я бы использовал первый вариант.

Так же, вы должны использовать свойство key в списках:

{this.state.todoValue.map((item, index) => (
  <Li key={index} text={item} />
 ))}

Lists and keys

Comments

[Алексей Милютин]

Огромное спасибо !