为什么反应钩子状态不会更新

Question

我正在尝试使用setColoredFields钩子更新coloredFields状态。

仅在computerMove功能中更新状态。 我也想更新userMove中的状态。 它们中只有一个可以同时工作。在computerMove中删除setColoredFields时，setColoredField在userMove中起作用。如何在userMove函数中更新状态？

const Game = () => {
    const [settings, setSettings] = useState([]);
    const [gameMode, setGameMode] = useState({ field: 5, delay: 2000 });
    const [name, setName] = useState("Josh");
    const [gameEnds, setGameEnds] = useState(false);
    const [coloredFields, setColoredFields] = useState([]);
    const [isUserMove, setIsUserMove] = useState(false);
    const [num, setNum] = useState(null);

    useEffect(() => {
        const getSettings = async () => {
            try {
                const resp = await fetch(
                    "https://starnavi-frontend-test-task.herokuapp.com/game-settings"
                );
                const data = await resp.json();

                const arrayOfArrays = Object.entries(data);
                const arrayOfObjects = arrayOfArrays.map(item => ({
                    [item[0]]: item[1]
                }));
                setSettings(arrayOfObjects);
            } catch (e) {
                console.log(e);
            }
        };

        getSettings();
    }, []);

    useEffect(() => {
        setColoredFields(prev => [...prev, num]);
    }, [num]);

    const handleSelect = e => {
        const { value } = e.target;
        const selectedMode = settings.filter(
            mode => Object.values(mode)[0].field === Number(value)
        );
        setGameMode(Object.values(selectedMode[0])[0]);
    };

    const userMove = e => {
        let field = e.target;
        let computerField = coloredFields[coloredFields.length - 1];

        if (isUserMove) {
            if (computerField === Number(field.id)) {
                field.style.backgroundColor = "green";
            } else {
                field.style.backgroundColor = "red";
            }
            setNum(Number(field.id));
            // setColoredFields([...coloredFields, Number(field.id)]);
            setIsUserMove(false);
            computerMove();
        } else {
            return;
        }
    };

    const renderFields = () => {
        let fields = [];
        for (let i = 1; i <= gameMode.field * gameMode.field; i++) {
            fields.push(<Field onClick={userMove} id={i} key={i}></Field>);
        }
        return fields;
    };

    const computerMove = () => {
        let fields = gameMode.field * gameMode.field;
        let randomID = getRandomInt(fields);
        let square = document.getElementById(randomID);
        if (!coloredFields.includes(randomID)) {
            // setColoredFields([...coloredFields, randomID]);
            setNum(randomID);
            square.style.backgroundColor = "blue";
            setIsUserMove(true);
        } else {
            computerMove();
        }
    };

    const handlePlayButton = () => {
        computerMove();
    };

    return (
        <GameWrapper>
            <ButtonWrapper>
                <Select onChange={handleSelect}>
                    <Option value={5}>Pick game mode</Option>
                    {settings.length > 0
                        ? settings.map(item => (
                                <Option
                                    key={Object.keys(item)[0]}
                                    value={Object.values(item)[0].field}>
                                    {Object.keys(item)[0]}
                                </Option>
                          ))
                        : null}
                </Select>
                <Input
                    placeholder='Enter your name'
                    onChange={e => setName(e.target.value)}
                />

                <Button onClick={handlePlayButton}>Play</Button>
            </ButtonWrapper>
            <CongratText gameEnds={gameEnds}>{name} Won !</CongratText>
            <Fields number={gameMode.field}>{renderFields()}</Fields>
        </GameWrapper>
    );
};