时间戳

首页 > 解决方案 > 反应useState没有立即更新

javascript - 反应useState没有立即更新

问题描述

我是 React 的新手，只是偶然发现了 useState 不会立即更新的问题。我已经尝试过有关 stackoverflow 的答案，但没有解决，因为我有多个 useState，每个都包含一个子组件列表。所以使用 useEffect 对我来说没有用。对我来说，问题是当 AIplayCards() 被调用时， useStates 还没有改变。所以然后 AIplayCards() 执行，卡片都是空的。

任何帮助，将不胜感激！

这是我的代码片段：

const Game = (props) => {
    const [mounted, setMounted] = useState(false)
    const [playerCards, setPlayerCards] = useState([])
    const [opponentLeftCards, setOpponentLeftCards] = useState([])
    const [startingTurn,setStartingTurn] = useState(true)
    const [turn, setTurn] = useState(null)

    useEffect(() => {
        resetGame();
        //componentWillMount
        setMounted(true)
    }, []);
    
    useEffect(() => {
        if(mounted){
            if (turn !== "player") AIplayCards()
        }
    }, [mounted]);
    //My effort to make it work

    const resetGame = async () => {
        let deck = Rules.newDeck()
        let playerCards = await Rules.setUserCards(deck)
        let opponentLeftCards = await Rules.setUserCards(deck)
        let firstTurn = Rules.setFirstTurn(playerCards, opponentLeftCards, opponentTopCards, opponentRightCards)
        //Works

        setPlayerCards(playerCards)
        setOpponentLeftCards(opponentLeftCards)
        setTurn(firstTurn)
        setStartingTurn(true)
        //here if I console.log the states and they arent changed yet.
    }

仅供参考：


    const AIplayCards = () => {
        let currentPlayerCards = getCardsforTurn()
        //returns null because turn is still null, and it match with none of the the if statements in getCardsforTurn. 
          ......

当其余代码尝试读取 currentPlayerCards 的长度时，将返回错误。

标签： javascriptreactjsreact-hooksuse-state

解决方案

您应该调用第二个函数作为 setState 的回调，因为 setState 是异步发生的。所以setState((state, props) => {...})代替setState(object). 如果您发现 useState / setState 没有立即更新，答案很简单：它们只是队列。React useState 和 setState 不会直接对状态对象进行更改；他们创建队列以优化性能，这就是更改不会立即更新的原因。

推荐阅读