Type error: Type '(e: ChangeEvent<{ value: string[] | unknown; }>) => void' error while building the project

Question

我对反应还比较陌生。我有一个项目，它有几个组件，这些组件中有这个 CustomeMultiSelect 组件。

我在另一个组件中调用了这些事件，但是当我编写代码时，在构建项目时出现了这个错误。

错误：

[BUILD] Failed to compile.
[BUILD]
[BUILD] ./components/Base-Components/CustomMultiSelect.tsx:46:9
[BUILD] Type error: Type '(e: ChangeEvent<{ value: string[] | unknown; }>) => void' is not assignable to type '(event: SelectChangeEvent<unknown>, child: ReactNode) => void'.
[BUILD]   Types of parameters 'e' and 'event' are incompatible.
[BUILD]     Type 'SelectChangeEvent<unknown>' is not assignable to type 'ChangeEvent<{ value: unknown; }>'.
[BUILD]       Type 'Event & { target: { value: unknown; name: string; }; }' is missing the following properties from type 'ChangeEvent<{ value: unknown; }>': nativeEvent, isDefaultPrevented, isPropagationStopped, persist
[BUILD]
[BUILD]   44 |         value={props.value || []}
[BUILD]   45 |         label={props.label}
[BUILD] > 46 |         onChange={set}
[BUILD]      |         ^
[BUILD]   47 |         renderValue={render}
[BUILD]   48 |         input={<OutlinedInput notched label={props.label} />}
[BUILD]   49 |       >
[BUILD] next build --debug exited with code 1
--> Sending SIGTERM to other processes..
[PROXY] node ./proxyServer.js exited with code 1

代码：

import {
  Checkbox,
  FormControl,
  InputLabel,
  ListItemText,
  MenuItem,
  OutlinedInput,
  Select,
  SelectProps,
} from "@mui/material";

export default function CustomMultiSelect(props: {
  value: string[] | undefined;
  setValue: (release: string[] | undefined) => void;
  placeholder: string;
  options: string[];
  label: string;
  transform?: (values: string) => string;
  selectProps?: SelectProps;
  className?: string;
}) {
  const set = (e: React.ChangeEvent<{ value: string[] | unknown }>) => {
    const value = e.target.value as string[];
    props.setValue(value.length === 0 ? undefined : value);
  };

  const render = (value: unknown) => {
    const arr = value as string[];
    if (arr.length === 0) return <em>{props.placeholder}</em>;
    return props.transform ? props.transform(`${arr.length} Selected`) : `${arr.length} Selected`;
  };

  return (
    <FormControl className={props.className} variant="outlined">
      <InputLabel shrink variant="outlined">
        {props.label}
      </InputLabel>
      <Select
        {...props.selectProps}
        multiple
        displayEmpty
        fullWidth
        variant="outlined"
        value={props.value || []}
        label={props.label}
        onChange={set}
        renderValue={render}
        input={<OutlinedInput notched label={props.label} />}
      >
        {props.options.map((val) => (
          <MenuItem key={val} value={val}>
            <Checkbox checked={(props.value || []).includes(val)} />
            <ListItemText primary={props.transform ? props.transform(val) : val} />
          </MenuItem>
        ))}
      </Select>
    </FormControl>
  );
}

我迷路了，因此任何帮助将不胜感激！！！

Answer 1

根据Mui Select的文档，函数签名应该是这样的：

function(event: SelectChangeEvent<T>, child?: object) => void

但是你的功能就像

function(event: React.ChangeEvent<{ value: string[] | unknown }>) => void

将您的代码更改为

const set = (e: SelectChangeEvent<{ value: string[] | unknown }>)

应该可以解决您的问题。

Type error: Type '(e: ChangeEvent<{ value: string[] | unknown; }>) => void' error while building the project

Type error: Type '(e: ChangeEvent<{ value: string[] | unknown; }>) => void' error while building the project

typescript

reactjs

material-ui