Question

我正在制作一个游戏，但是我在 React 上使用 setState 钩子时遇到问题，它没有更新我的状态，我的状态属性是

const [state,setState] =useState({
score:0,
holes:9,
initGame:false,
lastHole:-1,
minPeepTime: 200,
maxPeepTime: 1000})

我也有 2 个 useEffect 钩子只是为了测试

  useEffect(()=>{
console.log("init game");
console.log(state.initGame);
console.log("--------------");
},[state.initGame])

  useEffect(()=>{
    console.log("last hole");
    console.log(state.lastHole);
    console.log("##############");
    },[state.lastHole])

我有一个启动游戏的功能

const StartGame=()=>{
    console.log("here")
    setState({...state,initGame: true,score:0,lastHole: 15})

    peep();
    setTimeout(() => {
      console.log("Game Over")
      setState({...state,lastHole:-1,initGame: false})
      
  }, 10000)
  }

实际上正在打印“here”，当时间结束时正在打印“Game Over”。 peep() 函数更新属性 lastHole 并正确调用 useEffect，但是 setState 永远不会更新属性 initGame 并且我的实际问题，该属性的 useEffect 永远不会调用（只是第一次加载我的页面时，但不是在StartGame 函数）及其值永远不会改变

更新：

这是窥视功能。

const randomTime = (min, max) => {
    return Math.round(Math.random() * (max - min) + min);
  };


  const randomHole = () => {
    const idx = Math.floor(Math.random() * state.holes);
    if (idx === state.lastHole){
      return randomHole();
    } 
    setState({...state,lastHole: idx});
  }

  const peep = () => {
    randomHole();
    let time = randomTime(state.minPeepTime,state.maxPeepTime)

    if(state.initGame){
      setTimeout(() => {
        peep()
      }, time)
    }
  }

这是代码的输出

Answer 1

要在这种情况下正确更新状态，请使用：

def find(x):
    res = []
    for item in dict_Test[x]:
        if item not in dict_Test:
            res.append(item)
        else:
            res.extend(find(item))
    return res


print(find('X'))  # ['B', 'A', 'D', 'O', 'Z', 'tit', 'E']

setTimeout 部分变为

  setState((initialState) => ({
    ...initialState, 
    initGame: true,
    score: 0,
    lastsHole: 15
  }))

我不知道 peek 有什么作用，也不知道 setTimeout 的重要性；

Answer 2

这里的问题在于 setState。 setState 不会像您预期的那样立即更改状态。

setState({
      ...state,
      initGame: true,
      score: 0,
      lastHole: 15,
    });

peep()    // value of initGame is false

出乎意料的是，initGame 的值仍然会是 false。更改所有设置状态，如下所示。

setState((state) => ({
      ...state,
      initGame: true,
      score: 0,
      lastHole: 15,
    }));

这将在调用 peep() 之前成功地将 initGame 设置为 true

最终输出如下所示。

React hooks - setState 不更新某些状态属性

2 个答案: