React自定义Hook状态不更新：user值始终为null求助

你写的useChat Hook里的useState是组件局部状态——每次调用useChat都会生成完全独立的状态实例。OnlineUsers和Chat是两个独立组件，各自调用useChat时会创建属于自己的user状态，两者完全隔离。所以OnlineUsers里调用setChatWithUser只会更新自身组件内的状态，不会影响Chat组件里的user值，这就是为什么Chat里的user始终为null。

要实现跨组件状态共享，有几种常用方式：

方式1：React Context（推荐多组件共享场景） #

通过Context将状态提升到公共父组件层级，让所有需要访问该状态的组件共享同一数据源：

1. 创建ChatContext #

// ChatContext.tsx
import { createContext, useContext, useState, ReactNode } from 'react';
import { User } from './your-types-file'; // 替换为你的User类型定义路径

type ChatContextType = {
  user: User | null;
  setChatWithUser: (user: User) => void;
};

const ChatContext = createContext<ChatContextType | undefined>(undefined);

// 提供状态的Provider组件
export const ChatProvider = ({ children }: { children: ReactNode }) => {
  const [user, setUser] = useState<User | null>(null);

  const setChatWithUser = (user: User) => {
    setUser(user);
  };

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

// 改造后的useChat Hook
export const useChat = () => {
  const context = useContext(ChatContext);
  if (!context) {
    throw new Error('useChat必须在ChatProvider组件内部使用');
  }
  return context;
};

2. 在父组件中包裹需要共享状态的组件 #

比如在App.tsx中：

import { ChatProvider } from './ChatContext';
import { OnlineUsers } from './OnlineUsers';
import { Chat } from './Chat';

function App() {
  return (
    <ChatProvider>
      <div className="app-container">
        <OnlineUsers />
        <Chat />
      </div>
    </ChatProvider>
  );
}

export default App;

改造后，OnlineUsers和Chat调用useChat时，会拿到同一Context中的状态，OnlineUsers触发setChatWithUser后，Chat组件的user会自动更新并重新渲染。

方式2：状态提升到共同父组件（适合简单场景） #

如果只有OnlineUsers和Chat两个组件需要共享状态，直接把状态放到它们的共同父组件中，通过props传递：

父组件（如App.tsx） #

import { useState } from 'react';
import { OnlineUsers } from './OnlineUsers';
import { Chat } from './Chat';
import { User } from './your-types-file';

function App() {
  const [chatUser, setChatUser] = useState<User | null>(null);

  return (
    <div className="app-container">
      <OnlineUsers setChatWithUser={setChatUser} />
      <Chat user={chatUser} />
    </div>
  );
}

修改OnlineUsers组件 #

export const OnlineUsers = ({ setChatWithUser }: { setChatWithUser: (user: User) => void }) => {
  const { documents, error } = useCollection("users", null);

  const handleClick = (user: User) => {
    setChatWithUser(user);
  };

  // 渲染部分保持不变...
};

修改Chat组件 #

export const Chat = ({ user }: { user: User | null }) => {
  console.log(user);

  // 渲染部分保持不变...
};

方式3：状态管理库（复杂场景） #

如果你的应用有大量跨组件状态共享需求，可以使用Redux、Zustand、Jotai等状态管理库，这类工具能更高效地管理全局状态。

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