类型错误：生成项目时键入错误'(e: ChangeEvent<{ value: string[] | unknown; }>) => void'

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

应该能解决你的问题。