Next.js中React Context setState更新全局状态不生效问题

核心问题点 #

你当前的代码存在3个直接导致更新异常/判断误判的问题：

• 状态更新判断逻辑错误：React的useState触发的更新是异步批量执行的，你在setTodos([...todos, newTodo])执行后立刻打印当前作用域的todos，拿到的永远是更新前的旧值——当前函数闭包里的todos不会被同步修改，只有组件重渲染后才能拿到最新状态，这个打印逻辑会直接误导你认为状态没有更新。
• 状态更新存在闭包陷阱：你给saveTodo套的useCallback依赖了外部的todos状态，同时用[...todos, newTodo]的方式更新状态，当短时间连续调用saveTodo、或者调用方拿到的是未更新的旧版saveTodo引用时，会出现后一次更新覆盖前一次状态的问题，表现为新增的todo丢失、状态始终不对。
• 多Provider实例隔离（最高发隐性问题）：如果做完前两步修正还是拿不到更新，全局搜索所有TodoProvider的引用，确认除了_app.tsx里的全局包裹外，没有其他页面/组件父级单独嵌套了TodoProvider。Context的状态是和Provider实例绑定的，内层独立的Provider会创建完全隔离的新上下文，组件会优先读取最近一层Provider的值，和全局层的状态完全不互通。

可直接落地的修复代码 #

首先修改Provider.tsx里的状态更新逻辑，用函数式更新写法彻底规避闭包问题：

import React, { createContext, useCallback, useState } from 'react'

export interface ITodo {
  id: number
  title: string
  description: string
  status: boolean
}
export type TodoContextTypeTEST = {
  todos: ITodo[]
  saveTodo: (todo: ITodo) => void
}

type Props = {
  children: React.ReactNode
}

export const TodoContext = createContext<TodoContextTypeTEST>({ saveTodo: () => {}, todos: [] })

const TodoProvider: React.FC<Props> = ({ children }) => {
  const [todos, setTodos] = useState<ITodo[]>([])

  const saveTodo = useCallback(
    (newTodo: ITodo) => {
      console.log('receive new todo in provider', newTodo)
      // 函数式更新可以拿到当前最新的状态值，不需要依赖外部todos
      setTodos(prevTodos => {
        const nextTodos = [...prevTodos, newTodo]
        console.log('latest todos after update', nextTodos)
        return nextTodos
      })
    },
    // 空依赖，saveTodo初始化后永远不会变，不存在闭包旧值问题
    [],
  )

  return <TodoContext.Provider value={{ todos, saveTodo }}>{children}</TodoContext.Provider>
}

export default TodoProvider

校验步骤 #

1. 全局排查所有TodoProvider的使用位置，删除除_app.tsx全局包裹外的多余Provider嵌套。
2. 在读取todos的目标组件中加入打印逻辑，确认调用saveTodo后组件触发重渲染，且打印出最新的todos值即可：

const { todos } = useContext(TodoContext)
// 重渲染时会打印最新值
console.log('todos in consumer component', todos)

内容的提问来源于stack exchange，提问作者DevDuke