如何将 setState 传递给另一个函数并将其用于 material-ui select 的目标值并处理更改，"value is undefined" 错误

Question

我正在使用 material ui select 组件，其中填充了来自具有值和选项的数组的数据。

数组中还有一个名为“setFilter”的嵌套对象道具。 setFilter有一个setState的值，后面handleFlilter会用到。

  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>
            );
          }
        )}

问题是，我收到一个名为“无法读取未定义的属性（读取 'value'）”的错误或代码示例中的“e.target 未定义”。

不确定问题到底出在哪里。我没有正确定位价值，或者功能不正确？它不是像 div 这样的普通 html 元素，而是 material select，因此它应该与 selected value prop.

一起使用

我检查了属性值，选项在 select 列表中正确可见。

这是演示示例：https://codesandbox.io/s/unstyledselectcontrolled-material-demo-forked-wxqnrs?file=/demo.js:5335-5927

Answer 1

有两个问题：

如果你想让它被触发，你需要包装你的处理程序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)}
>
...

工作代码沙箱：https://codesandbox.io/s/unstyledselectcontrolled-material-demo-forked-e49v8s

如何将 setState 传递给另一个函数并将其用于 material-ui select 的目标值并处理更改，"value is undefined" 错误

How to pass setState into another function and use it to target value from material-ui select and handle change, "value is undefined" error

javascript

select

reactjs

material-ui

use-state