Ошибка Uncaught TypeError: Cannot read property 'value' of undefined

@alexpp_190 · Регистрация: 28.04.2020

Студворк — интернет-сервис помощи студентам

Всем привет! Я новичок в react.

Работаю с jHipster. Пытаюсь получить значение, которое выбрано пользователем в выпадающем списке Select библиотеки Ant Design.

1.Вначале, в событии componentDidMount загружаю массив данных для выпадающего списка urlSystems, который содержит idExtSystem (ключ), и name (значение name). По сути - это список брендов автозаправок (Лукойл, Газпром, ...)

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
  componentDidMount() {
    this.setState({
      character: [],
      characterSys: [],
      extSystem: ""
    });
    this.buildUrl();
    fetch(this.urlSystems)
      .then(response => response.json())
      .then((data) => {
        this.setState({
          characterSys: data
        })
      })
  }

2. Выпадающий список Select загружается значениями из urlSystems

JavaScript
1
2
3
 <Select name="seSys" showSearch onChange={this.handleExtSysChange} value={this.state.extSystem}>
   {this.state.characterSys.map( (item) => <Option key={item.idExtSystem} value={item.idExtSystem}>{item.name}</Option> )}
 </Select>

3. Раскрываю список. Пытаюсь выбрать, например, Лукойл. Выбираю в списке - список закрывается, а значение в качестве
активного не устанавливается.

4. Пытаюсь в поле для поиска селекта ввести "Лук", чтобы найти Лукойл. Символы ввести не удается, ввод не доступен.
При попытке ввода текста в консоли jHipster - выпадает ошибка react-dom.development.js:475 Uncaught TypeError: Cannot read property 'value' of undefined. Подозреваю, что где-то переменную непроинициализировал...

Событие изменения значения в списке обрабатываю так:

JavaScript
1
2
3
  handleExtSysChange(event) {
    this.setState({extSystem: event.target.value});
  }

Причем, если в обработчике OnChange захардкодить какое-то значение из списка,то при любой смене значения
в списке всегда будет активным то, что захардкодил. Ошибок в консоли нет:

JavaScript
1
2
3
  handleExtSysChange(event) {
    this.setState({extSystem: "Роснефть"});
  }

Подскажите, в чем природа ошибки, как с ней бороться? Дела. по аналогии с примером Ant Design https://codesandbox.io/s/rcjmu... x.js:0-903 , но там статические option.

Заранее спасибо!

@shsv382 · 29.04.2020, 13:05

Читаешь ошибку и понимаешь, что в этом месте

JavaScript
1
2
3
handleExtSysChange(event) {
    this.setState({extSystem: event.target.value});
}

выдается ошибка Cannot read property 'value' of undefined, что в переводе означает "Невозможно прочитать свойства value у undefined-переменной". То есть, event.target === undefined. Ищи, корректно ли передаешь обработчик события полю ввода текста

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .