类型 'unknown' 不能分配给类型 '(prevState: number | undefined) => number |不明确的'

时间:2021-06-22 17:01:21

标签: javascript reactjs typescript react-native setstate

我正在使用 material ui 的 select 组件将选定的值保存在一个变量中:

=SUM(INDEX(A:A,ROWS($1:1)*5-4):INDEX(A:A,ROWS($1:1)*5))

但是,在 handleChange 函数中设置状态时出现此错误,我该如何解决?

const [ratio, setRatio] = useState<number>();
...
const handleChangeRatio = (e: React.ChangeEvent<{ name?: string | undefined; value: unknown; }>) => {
    //const value = typeof e.target.value === "number" ? e.target.value : "";
    setRatio(e.target.value);
};
...
    <Select
        labelId="demo-simple-select-filled-label"
        id="demo-simple-select-filled"
        value={splittingMethod}
        onChange={(e)=>handleChangeRatio(e)}
    >
        <MenuItem value={0}>
            0
        </MenuItem>
        <MenuItem value={0.1}>0.1</MenuItem>
        <MenuItem value={0.2}>0.2</MenuItem>
    </Select>

1 个答案:

答案 0 :(得分:1)

React 的 useState<number>() 返回一个值的元组,类型为:ratio: number | undefinedsetRatio: SeStateAction<number | undefined>。当您尝试向 setRatio 类型的 unknown 值馈送时。

最简单的方法是将narrow类型unknown改为number

const handleChangeRatio = (e: React.ChangeEvent<{ value: unknown }>) => {
    if (typeof e.target.value === 'number') setRatio(e.target.value)
};

或具有更好的运行时安全性:

const handleChangeRatio = (e: React.ChangeEvent<{ value: unknown }>) => {
    const value = Number(e.target.value)
    if (!isNaN(value)) setRatio(value)
};