Я использую компонент выбора пользовательского интерфейса материала, который заполняется данными из массива со значениями и параметрами.
В массиве также есть вложенная объектная поддержка, называемая «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
Есть две проблемы:
onChange
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); }; Во всяком случае, теперь это работает, спасибо.