React中useContext内useState对象数组无法更新的问题排查

我在React项目里用useContext搭配useState管理对象数组状态，试了扩展运算符（spread）和concat方法更新数组，但都没成功。已经确认Context本身工作正常，用filter和find判断元素是否存在时能进入对应的条件分支，但新值就是存不到状态里。

相关代码 #

状态定义 #

const [chatDetails, setChatDetails] = useState([]);

状态更新函数 #

const createChatDetailRegister = async (channelSid: string) => {
  const existsChannelInfo = chatDetails.filter(chatInfo => chatInfo.channelSid === channelSid);

  if (existsChannelInfo.length < 1) {
    const chatInfo = { channelSid, isChatOpen: true };

    setChatDetails(prevstate => [...prevstate, chatInfo]);
  }
};

完整Context代码 #

import React, { createContext, ReactNode, useState } from 'react';

interface ChatContextData {
  createChatDetailRegister: (channelSid: string) => void;
}

interface ChatProviderProps {
  children: ReactNode;
}

export const ChatContext = createContext({} as ChatContextData);

export function ChatProvider({ children }: ChatProviderProps) {
  const [chatDetails, setChatDetails] = useState([]);

  const createChatDetailRegister = async (channelSid: string) => {
    const existsChannelInfo = chatDetails.filter(chatInfo => chatInfo.channelSid === channelSid);

    if (existsChannelInfo.length < 1) {
      const chatInfo = { channelSid, isChatOpen: true };

      setChatDetails(prevstate => [...prevstate, chatInfo]);
    }
  };

  return (
    <ChatContext.Provider
      value={{
        createChatDetailRegister,
      }}
    >
      {children}
    </ChatContext.Provider>
  );
}

App文件代码 #

import React from 'react';
import App from 'next/app';

import './app.css';
import 'react-toastify/dist/ReactToastify.css';

import { ChatProvider } from '../components/context/Chat';

class MyApp extends App {
  constructor(props) {
    super(props);
  }

  render() {
    const { Component, pageProps } = this.props;

    return (
      <ChatProvider>
        <Component {...pageProps} />
      </ChatProvider>
    );
  }
}

export default MyApp;

调用Context的组件代码（index.tsx） #

import { ChatContext } from 'components/context/Chat';
import React, { useContext } from 'react';
import { Container, ButtonContainer } from './styles';
import { ProjectMembersChatButtonsProps } from './types';

const ProjectMembersChatButtons: React.FC<ProjectMembersChatButtonsProps> = () => {
  const { createChatDetailRegister } = useContext(ChatContext);

  return (
    <Container>
      <ButtonContainer
        onClick={() => {
          createChatDetailRegister('1279812931');
        }}
      ></ButtonContainer>
    </Container>
  );
};

export default ProjectMembersChatButtons;

问题原因及修复方案 #

核心问题 #

1. createChatDetailRegister被标记为async但内部无异步操作，虽不直接导致失败，但会让函数返回Promise，属于冗余写法。
2. 判断元素是否存在时直接引用闭包中的chatDetails，可能捕获的是旧状态值，导致逻辑偏差。
3. 未将chatDetails状态暴露到Context的value中，其他组件无法读取更新后的状态（如果有需求的话）。

修复步骤 #

1. 移除不必要的async关键字。
2. 在setChatDetails的函数式更新中基于prevState判断元素是否存在，规避闭包问题。
3. （按需）将chatDetails加入Context的value，供其他组件读取。

修改后的Context代码 #

import React, { createContext, ReactNode, useState } from 'react';

// 定义ChatInfo类型，增强类型安全
interface ChatInfo {
  channelSid: string;
  isChatOpen: boolean;
}

interface ChatContextData {
  chatDetails: ChatInfo[];
  createChatDetailRegister: (channelSid: string) => void;
}

interface ChatProviderProps {
  children: ReactNode;
}

export const ChatContext = createContext({} as ChatContextData);

export function ChatProvider({ children }: ChatProviderProps) {
  const [chatDetails, setChatDetails] = useState<ChatInfo[]>([]);

  const createChatDetailRegister = (channelSid: string) => {
    setChatDetails(prevState => {
      // 基于最新的prevState判断元素是否存在
      const isExists = prevState.some(info => info.channelSid === channelSid);
      if (!isExists) {
        return [...prevState, { channelSid, isChatOpen: true }];
      }
      // 元素已存在，返回原状态避免不必要的重渲染
      return prevState;
    });
  };

  return (
    <ChatContext.Provider
      value={{
        chatDetails,
        createChatDetailRegister,
      }}
    >
      {children}
    </ChatContext.Provider>
  );
}

验证方式 #

在调用组件中同时获取chatDetails并打印，点击按钮后查看状态是否更新：

const ProjectMembersChatButtons: React.FC<ProjectMembersChatButtonsProps> = () => {
  const { createChatDetailRegister, chatDetails } = useContext(ChatContext);
  
  console.log('当前聊天列表状态:', chatDetails);

  return (
    <Container>
      <ButtonContainer
        onClick={() => {
          createChatDetailRegister('1279812931');
        }}
      >打开聊天</ButtonContainer>
    </Container>
  );
};

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