React猜数字游戏状态更新异常：为什么状态仅在输入handleChange时更新？

问题原因 #

• 你直接对原状态数组arrayNumbers执行了push操作，这是原地修改引用类型状态的错误写法：React对引用类型状态是对比内存地址判断是否需要更新，你把修改后的同一个数组引用传给setArrayNumbers，React会认为状态没有发生变更，所以不会触发组件重渲染。只有当你下次触发其他状态更新（比如修改输入框触发insertedNumber更新）时，才会把之前未生效的数组变更渲染出来，就出现了状态落后一步的现象。
• 额外补充：你当前的写法还存在历史记录渲染无分隔符、提交后输入框不清空的体验问题，也可以一并优化。

修复方案 #

修改handleClick里的数组更新逻辑，基于原数组生成新数组再传入状态setter即可，参考修正后的完整代码：

import { useState, useEffect } from 'react';
// 保留你原有Form、Button等组件的引入逻辑即可

// 补充你原有randomNumber的实现即可，以下是示例
const randomNumber = () => Math.floor(Math.random() * 100) + 1;

export const DashboardPage = () => {
    const [mounted, setMounted] = useState(false);
    const [currentNumber, setCurrentNumber] = useState(null);
    const [insertedNumber, setInsertedNumber] = useState(null);
    const [result, setResult] = useState(null);
    const [arrayNumbers, setArrayNumbers] = useState([]);

    useEffect(() => {
        const rnd = randomNumber();
        if (!mounted) {
            setCurrentNumber(rnd);
            setMounted(true);
        }
    }, [mounted]);

    const handleChange = (e) => {
        setInsertedNumber(e.target.value);
    }

    const handleClick = (e) => {
        e.preventDefault();
        // 核心修改：基于旧状态生成新数组，不原地修改原状态
        setArrayNumbers(prev => [...prev, insertedNumber]);
        // 可选优化：提交后清空输入框
        setInsertedNumber('');
        if (parseInt(insertedNumber) === parseInt(currentNumber)) {
            setResult("EVVIVA hai vinto!");
        } else {
            setResult("Oops, ritenta! era " + currentNumber);
        }
    }

    const handleOnSubmit = (e) => {
        e.preventDefault();
    }
    
    return (
        <>
            {/* 可选优化：给历史记录加逗号分隔更易读 */}
            <h2>Storico tentativi: {arrayNumbers.join(', ')}</h2>
            <h2>La soluzione è: {currentNumber}</h2>
            <Form onSubmit={handleOnSubmit}>
                <Form.Group controlId="formGTN">
                    <Form.Label>Guess the number:</Form.Label>
                    {/* 绑定value属性，配合提交清空逻辑生效 */}
                    <Form.Control type="text" value={insertedNumber || ''} onChange={handleChange} />
                </Form.Group>
                <Button variant="primary" type="submit" onClick={handleClick} label="Is it?" />
            </Form>
            <h1>{result}</h1>
        </>
    )
}

export default DashboardPage;

内容的提问来源于stack exchange，提问作者sineverba