使用useContext时如何更新useState值？状态未更新问题求助

我尝试在index.tsx中通过useContext管理Context组件内的useState全局状态，目前无报错，但状态更新后始终不生效，useState里没有存储任何内容。把useState直接放在index.tsx里时一切正常，问题出在useContext管理的场景下。

Context组件代码 #

import { Message } from "@/pages/api/sendMessage";
import React, { Dispatch, SetStateAction, useContext, useState } from "react";

const MessagesContext = React.createContext<Message[]>([]);
const MessagesUpdateContext = React.createContext<
  Dispatch<SetStateAction<Message[]>>
>(() => []);

export function useMessages() {
  return useContext(MessagesContext);
}
export function useMessagesUpdate() {
  return useContext(MessagesUpdateContext);
}

export function MessagesProvider({ children }: any) {
  const [messages, setMessages] = useState<Message[]>([]);

  return (
    <MessagesContext.Provider value={messages}>
      <MessagesUpdateContext.Provider value={setMessages}>
        {children}
      </MessagesUpdateContext.Provider>
    </MessagesContext.Provider>
  );
}

Index.tsx中的导入与使用 #

导入代码 #

import {
  MessagesProvider,
  useMessages,
  useMessagesUpdate,
} from "@/components/MessagesContext";

使用自定义hooks #

const messages = useMessages();
const setMessages = useMessagesUpdate();

问题场景1：submit函数中状态未更新 #

执行submit函数时，useState状态没有更新：

function submit() {
  const message: Message = {
    role: "user",
    content: textInput,
  };
  setMessages([...messages, message]);
  setTextInput("");
  sendMessages([...messages, message]);
  setHideExamples(true);
}

问题场景2：useEffect中初始化状态未生效 #

页面渲染时尝试存入初始消息，但console.log(messages)显示为空：

useEffect(() => {
  if (!hasSentInitialPrompt) {
    const initialPrompt: Message = {
      role: "system",
      content:
        "Test Test Test",
    };
    setMessages([...messages, initialPrompt]);
    sendMessages([...messages, initialPrompt]);
    setHasSentInitialPrompt(true);
  }
}, [hasSentInitialPrompt]);

解决方案 #

1. 使用函数式更新获取最新状态 #

问题核心是闭包捕获了旧的messages快照，useState的更新是异步的，直接使用[...messages, message]会基于旧值更新，导致状态不生效。改用函数式更新，每次基于最新的状态进行修改：

修改submit函数

function submit() {
  const message: Message = {
    role: "user",
    content: textInput,
  };
  // 用函数式更新获取最新状态
  setMessages(prevMessages => [...prevMessages, message]);
  setTextInput("");
  // 如果sendMessages需要最新消息数组，可在useEffect中监听messages变化后调用
  setHideExamples(true);
}

修改useEffect

useEffect(() => {
  if (!hasSentInitialPrompt) {
    const initialPrompt: Message = {
      role: "system",
      content: "Test Test Test",
    };
    setMessages(prevMessages => [...prevMessages, initialPrompt]);
    setHasSentInitialPrompt(true);
  }
}, [hasSentInitialPrompt]);

2. 确保Provider包裹范围正确 #

检查项目组件结构，确保所有使用useMessages/useMessagesUpdate的组件都被MessagesProvider包裹。比如在Next.js的_app.tsx中：

import { MessagesProvider } from "@/components/MessagesContext";

function MyApp({ Component, pageProps }) {
  return (
    <MessagesProvider>
      <Component {...pageProps} />
    </MessagesProvider>
  );
}

export default MyApp;

3. 可选：合并Context简化代码 #

可以将状态和更新函数合并到同一个Context中，减少Context数量，提升代码可读性：

import { Message } from "@/pages/api/sendMessage";
import React, { Dispatch, SetStateAction, useContext, useState } from "react";

type MessagesContextType = {
  messages: Message[];
  setMessages: Dispatch<SetStateAction<Message[]>>;
};

const MessagesContext = React.createContext<MessagesContextType>({
  messages: [],
  setMessages: () => [],
});

export function useMessages() {
  return useContext(MessagesContext);
}

export function MessagesProvider({ children }: { children: React.ReactNode }) {
  const [messages, setMessages] = useState<Message[]>([]);

  return (
    <MessagesContext.Provider value={{ messages, setMessages }}>
      {children}
    </MessagesContext.Provider>
  );
}

使用时直接解构：

const { messages, setMessages } = useMessages();

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