React Material Select：预期的类型来自属性 'renderValue'，该属性在类型 'IntrinsicAttributes & SelectProps' 上声明

Question

React Material Select出现以下错误。我该怎么解决这个问题？错误出现在"渲染值"上。我正在使用打字稿，不知道如何修复。我应该在renderValue线上放置什么？

错误：

Type '(selected: Array<number>) => string' is not assignable to type '(value: unknown) => ReactNode'.
Types of parameters 'selected' and 'value' are incompatible.
Type 'unknown' is not assignable to type 'number[]'.ts(2322)
Select.d.ts(111, 3): The expected type comes from property 'renderValue' which is declared here on type 'IntrinsicAttributes & SelectProps'

代码：

const [testValue, setTestValue] = useState<Array<number>>([]);
<FormControl className={classes.formControl}>
<InputLabel id="test-select-label">Location</InputLabel>
<Select
multiple
fullWidth
labelId="test-select-label"
id="demo-multiple-checkbox"
variant="outlined"
label="Location"
value={testValue}
name="first"
onChange={(event: any) => {
setTestValue(event.target.value);
}}
input={<OutlinedInput label="Tag" />}
renderValue={(selected: Array<number>) =>
serviceLocationOptions
.filter(x => selected.includes(x.serviceLocationId))
.map(x => x.name)
.join(', ')
}
>
{serviceLocationOptions.map(item => (
<MenuItem
key={item.serviceLocationId}
value={item.serviceLocationId}
>
<Checkbox
checked={testValue.includes(item.serviceLocationId)}
/>
<ListItemText primary={item.name} />
</MenuItem>
))}
</Select>
</FormControl>

Answer 1

在Typescript中，不能将具有更特定参数的函数分配给具有不太特定

const f: (v: unknown) => string = (a: number) => "hi";
Error: Type '(a: number) => string' is not assignable to type '(v:
unknown) => string'.

有两种解决方案：

1. 将Meterial UI更新到最新版本。他们已经更改了类型，而您的代码也能正常工作：

value?: T | '';
renderValue?: (value: T) => React.ReactNode;

2. 将selected类型下移到使用点：

renderValue={(selected: unknown) =>
serviceLocationOptions
.filter((x) =>
(selected as Array<number>).includes(x.serviceLocationId)
)
.map((x) => x.name)
.join(", ")
}

或者只使用任何一个