在 useEffect 挂钩中反应更新状态数组

Question

我已经阅读了所有关于在 React 数组上设置状态的问题和答案，但 none 似乎解决了我的问题。

我这样初始化我的数组：

 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)
    }

控制台始终记录它从未使用我尝试设置的新 dailyCellStatuses 更新的旧状态。我试过克隆 dailyCellStatuses [...dailyCellStatuses] 我试过在 setter 中调用一个函数我真的卡住了。求助！

Answer 1

您的状态更新正常，您的问题是您正在控制台记录同一渲染周期中的值，

控制台记录 useEffect 之外的值，或者您可以这样做

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

在 useEffect 挂钩中反应更新状态数组

React update state array in useEffect hook

arrays

state

setstate

reactjs

use-effect