@doppelgangerz
JavaScript

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

Добрый день, не могу никак понять по какой причине в массив записывается значение 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 = '';
    }
  }
}

5ce3eb75ce026195388241.png
  • Вопрос задан
  • 114 просмотров
Решения вопроса 1
rockon404
@rockon404 Куратор тега React
Frontend Developer
У вас не массив приравнивается к 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
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
28 мар. 2024, в 18:16
1000 руб./за проект
28 мар. 2024, в 18:15
90000 руб./за проект
28 мар. 2024, в 18:05
5000 руб./за проект