Как передать setState в другую функцию и использовать его для целевого значения из выбора материала-интерфейса и обработки изменения, ошибка «значение не определено»

Я использую компонент выбора пользовательского интерфейса материала, который заполняется данными из массива со значениями и параметрами.

В массиве также есть вложенная объектная поддержка, называемая «setFilter». setFilter имеет значение setState, которое позже будет использоваться в handleFilter.

  const [years, setYears] = useState("0");
  const [hours, setHours] = useState("");

  const inputs = [
    {
      name: "YEARS",
      propValue: years,
      setFilter: setYears,
      placeholder: "Years",
      selectOptions: optionsYears
    },
    {
      name: "AVAILABILITY",
      propValue: hours,
      setFilter: setHours,
      placeholder: "Availability",
      selectOptions: optionsHours
    }
  ];

  const handleFilter = (e, setFilter) => {
    setFilter(e.target.value);
  };

      <div>
        {inputs.map(
          ({ name, propValue, placeholder, selectOptions, setFilter }) => {
            return (
              <div>
                <CustomSelect
                  value = {propValue}
                  onChange = {handleFilter(setFilter)}
                >
                  {selectOptions.map((item) => (
                    <StyledOption key = {item.option} value = {item.value}>
                      {item.option}
                    </StyledOption>
                  ))}
                </CustomSelect>
              </div>
            );
          }
        )}

Проблема в том, что я получаю сообщение об ошибке "Невозможно прочитать свойства неопределенного (чтение значения)" или «e.target не определен» в примере кода.

Не уверен, где именно проблема. Я неправильно нацеливаю значение или функция неверна? Это не какой-то обычный html-элемент, такой как div, а выбор материала, поэтому он должен работать с выбранным значением.

Я проверил значение реквизита, и параметры правильно отображаются в списке выбора.

Вот демонстрационный образец: https://codesandbox.io/s/unstyledselectcontrolled-material-demo-forked-wxqnrs?file=/demo.js:5335-5927

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
0
26
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Есть две проблемы:

  1. Вам нужно обернуть обработчик, если вы хотите, чтобы он был запущен onChange
  2. Вам нужно передать e (значение) обработчику handerFilter

Например:

// Only changes to your code have been shown -- the rest was removed for brevity

...

const handleFilter = (e, setFilter) => {
  // Change: `e` in this case does not appear to be the event, but the value itself
  setFilter(e);
};

...

{/* Change: Wrapped Handler, passes e */}
<CustomSelect
  value = {propValue}
  // Takes `e` and then passes that and setFilter to your handler
  onChange = {(e) => handleFilter(e, setFilter)}
>
...

Рабочий кодSandbox: https://codesandbox.io/s/unstyledselectcontrolled-material-demo-forked-e49v8s

Лол, в вашем примере это работает, но в моем коде я все равно должен написать функцию обработки с e.target.value const handleFilter = (e, setFilter) => { setFilter(e.target.value); }; Во всяком случае, теперь это работает, спасибо.

P H 17.03.2022 17:42

Другие вопросы по теме