在 useEffect 掛鈎中反應更新 state 數組

Question

我已經閱讀了有關在 React 中的數組上設置 State 的所有問題和答案，但似乎沒有一個可以解決我的問題。

我像這樣初始化我的 arrays：

 const initialStates = {cellStatuses: () =>Array(6).fill(Array(5).fill(status.unguessed)), } const [dailyCellStatuses, setDailyCellStatuses] = useLocalStorage('dailyCellStatuses', initialStates.cellStatuses) const [cellStatuses, setCellStatuses] = useState(initialStates.cellStatuses)

然后我使用一個效果來模仿 componentDidMount 並在那個效果中檢查是否需要更新 cellStatuses

useEffect (() => {
    if (gameMode && playedAlreadyToday(lastPlayedDate)) {
      setBoard(dailyBoard)
      setCellStatuses(dailyCellStatuses)
      console.log(cellStatuses, 'cell statuses')
    } else {
      setBoard(initialStates.board)
    }

控制台始終記錄舊的 state 它永遠不會使用我嘗試設置的新 dailyCellStatuses 進行更新。 我嘗試克隆dailyCellStatuses [...dailyCellStatuses]我嘗試在setter 中調用function 我真的卡住了。 幫助！

Answer 1

您的 state 更新正常，您的問題是控制台在同一渲染周期中記錄值，

控制台記錄 useEffect 之外的值，或者您可以執行此操作

    if (gameMode && playedAlreadyToday(lastPlayedDate)) {
      setBoard(dailyBoard)
      setCellStatuses(dailyCellStatuses)
      console.log(dailyCellStatuses, 'cell statuses')
    } else {
      setBoard(initialStates.board)
    }