Question

我已经阅读了很多有关此问题的答案，但是它并没有帮助我。
功能组件一次需要订阅事件并从API获取数据以获取状态。
但是状态不能正确更改。

const [games, setGames] = useState(null);
const [activeGame, setActiveGame] = useState(null);
const [pending, setPending] = useState(false);

useEffect(() => {
    if (games === null) {
        setPending(true);
        API.Game.get({}).then((res) => {
            if (res.success) {
                console.log(res.msg.games) // Returning array of games [{...}, {...}]

                setGames(res.msg.games);
                setActiveGame(res.msg.activeGame);

                // Rendered games, but didn't changed state :/
                setTimeout(() => console.log(games), 1000) // Returning null (initial state)
            }
            setPending(false);
        });

        API.Socket.emit('subscribe', 'game');
        API.Socket.on('addGame', (game) => {
            setGames((games) => [...games, game]);
        });
        API.Socket.on('open', (isReconnect) => {
            if (isReconnect) API.Socket.emit('subscribe', 'game');
        });
    }
}, [games, pending, activeGame]);

根据您提供的答案，我尝试了此操作，但仍然无法正常工作。

const [games, setGames] = useState([null]);
const [activeGame, setActiveGame] = useState(null);
const [pending, setPending] = useState(false);

const fetchGames = async () => {
    setPending(true);
    const res = await API.DurakGame.get({});
    if (res.success) {
        setGames(res.msg.games);
        setActiveGame(res.msg.activeGame);
    }
    setPending(false);
    return true;
};

useEffect(() => {
    fetchGames();

    API.Socket.emit('subscribe', 'durak');
    API.Socket.on('addGame', (game) => {
        setGames((games) => [...games, game]);
    });
    API.Socket.on('open', (isReconnect) => {
        if (isReconnect) API.Socket.emit('subscribe', 'durak');
    });
}, []);

Answer 1

该问题可能由引起的：

也许您使用的API函数是异步的？
如果是，则useEffect参数回调为不异步，并且不能异步可能是：D。 Reference React Hooks。
解决方案： 您可以使用sperate函数API异步并调用useEffect函数。
也许您可以在此链接Example For useEffect async
更新后的数据状态为数组类型
状态数据类型是不可变的，这意味着您不能直接在状态上进行修改（不同的分配内存）。而数组类型是如果将变量赋值给其他变量可以具有不同分配的数据类型之一。
因此，您应该销毁数据以处理可以分配相同的数据。
React State with array

我希望能回答您的问题。之前谢谢

React useEffect不更改状态

1 个答案: