useState 行为怪异

Question

我正在使用此代码获取最小-最大范围内的随机数。出于某种原因，我得到的数字大于最大值。（console.log 表明最小值和最大值设置正确。）（我在这里展示相关代码。这不是整个文件。）

const RandomNumber = () => {
    const [min, setMin] = useState(0)
    const [max, setMax] = useState(0)
    const [rand, setRand] = useState(0)
    const classes = useStyles();
  
    const setRandom = () => {
        console.log(min);
        console.log(max);
        let random = (Math.floor(Math.random() * (max - min + 1)) + min)
        console.log(random);
        setRand(random)
    }

    return (
        <>
            <Stack direction="row" spacing={2} className={classes.root}>
                <TextField
                    id="filled-number"
                    label="Min-Number"
                    type="number"
                    InputLabelProps={{
                        shrink: true,
                    }}
                    variant="filled"
                    onChange={(e) => setMin(e.target.value)}
                />
                <TextField
                    id="filled-number"
                    label="Max-Number"
                    type="number"
                    InputLabelProps={{
                        shrink: true,
                    }}
                    variant="filled"
                    onChange={(e) => setMax(e.target.value)}
                />
                <Stack spacing={2} direction="row">
                    <Button variant="outlined" className={classes.button} onClick={setRandom}>Get Random!</Button>
                </Stack>

            </Stack>
            <h1>rand is: {rand}</h1>
        </>
    );
}

export default RandomNumber;

Answer 1

我认为您需要将 setMax 和 setMin 中的 e.target.value 转换为数字

e.target.value && !isNaN(e.target.value) && setMax(Number(e.target.value))

类似于setMin

e.target.value && !isNaN(e.target.value) && setMin(Number(e.target.value))

Answer 2

因为e.target.value是string类型，所以问题出在这行代码

let random = (Math.floor(Math.random() * (max - min + 1)) + min)

例如 max = "25" 和 min="9"（这是字符串，因为您从 e.target.value 设置而不将其转换为 int、

"25" - "9" = 14 工作正常，但是

Math.floor(....) + min

int + string = string

比如说 Math.floor 结果是 12，

12 + "9" = "129"

useState 行为怪异

useState acting strange

reactjs

use-state