型別錯誤：在構建專案時鍵入'(e:ChangeEvent<{value:string[]|unknown;}>)=>void'錯誤-有解無憂

我對反應比較陌生。我有一個專案，它有幾個組件，在這些組件中就是這個 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>
  );
}

我迷路了，因此任何幫助將不勝感激！！！

uj5u.com熱心網友回復：

根據Mui Select的檔案，函式簽名應該是這樣的：

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

但你的功能就像

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

將您的代碼更改為

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

應該解決你的問題。

轉載請註明出處，本文鏈接：https://www.uj5u.com/net/481467.html

標籤：反应打字稿材料-ui

上一篇：如何檢查物件的型別是否為類？

下一篇：記錄時參考串列顯示未定義