如何用Jotai实现两个React组件通信？解决加载状态同步问题

问题背景 #

• 现有两个React文件：
  • Reports.js：负责请求报告并展示结果，用户进入页面后显示加载动画，等待后端生成完成报告
  • AuthContext.js：通过Socket与后端保持长连接，接收报告生成完成的通知

需求是：后端通过Socket发送报告完成消息到AuthContext.js后，需要通知Reports.js关闭加载动画，但尝试直接调用组件内函数失败。

直接调用组件函数的错误情况 #

直接在AuthContext.js中导入Reports.js的setReportLoading函数，触发以下错误：

setReportLoading.js:115 Uncaught TypeError: setReportLoading is not a function

相关代码片段：

AuthContext.js #

import { setReportLoading } from 'Reports';

export const AuthProvider = ({ children }) => {
  socket.on('processmessage', (msg) => {
    if (msg.type == 'checking'){
      setReportLoading(2);         
    }            
  }); 
}

Reports.js #

const Reports = () => {
  const [loading, setLoading] = useState(1)

  const setReportLoading = (isLoading) => {
    setLoading(isLoading);
  };

  const renderContent = () => {
    if (loading === 1) return (
      <div className="d-flex justify-content-center align-items-center" style={{ minHeight: '200px' }}>
        <div className="spinner-border text-primary" role="status">
          <span className="visually-hidden">{t('loc_react_loading')}</span>
        </div>
      </div>
    )

    if (loading === 2) return (
      <div className="mb-4 card border-0 shadow-sm" style={{'min-width': '900px'}}>
        {renderReportSelection()}
        {showReport && renderReport()}
      </div>   
    )
  }

  return (
    <DashboardLayout>
    </DashboardLayout>
  )
}

export default Reports;

尝试Jotai状态管理的问题 #

使用Jotai 2.0.0后无报错，但handleReportloadingChange函数未执行：

AuthContext.js #

import { atom, useAtom } from 'jotai';

export const reportloadingAtom = atom(1);

export const AuthProvider = ({ children }) => {
  const [reportloading, setReportloading] = useAtom(reportloadingAtom);

  socket.on('processmessage', (msg) => {
    if (msg.type == 'checking') {
      setReportloading(2);
    }
  });

  // ...
};

Reports.js #

import { useAtom } from 'jotai';
import { reportloadingAtom } from 'AuthContext'

const Reports = () => {
  const [reportloading, setReportloading] = useAtom(reportloadingAtom);
  const [loading, setLoading] = useState(1);

  useEffect(() => {
    // 该函数应在reportloadingAtom值变化时执行
    function handleReportloadingChange() {
      console.log("handleReportloadingChange")
      setLoading(reportloading);
    }

  }, [reportloading]);

  // ...
};

可行解决方案 #

方案1：修复Jotai的使用逻辑 #

你的Jotai代码里，useEffect只定义了函数但没调用，所以不会执行。修改Reports.js的useEffect部分：

useEffect(() => {
  console.log("handleReportloadingChange")
  setLoading(reportloading);
}, [reportloading]);

更简洁的方式是直接使用atom的值作为加载状态，省去额外的useState同步：

const Reports = () => {
  const [reportloading] = useAtom(reportloadingAtom);

  const renderContent = () => {
    if (reportloading === 1) return (
      // 加载动画组件
    )

    if (reportloading === 2) return (
      // 报告内容组件
    )
  }

  return (
    <DashboardLayout>
      {renderContent()}
    </DashboardLayout>
  )
}

方案2：使用React Context共享状态 #

如果不想用第三方状态库，可扩展AuthContext来管理加载状态：

AuthContext.js

import { createContext, useContext, useState } from 'react';

const AuthContext = createContext();

export const AuthProvider = ({ children }) => {
  const [reportLoading, setReportLoading] = useState(1);

  socket.on('processmessage', (msg) => {
    if (msg.type == 'checking') {
      setReportLoading(2);
    }
  });

  return (
    <AuthContext.Provider value={{ reportLoading, setReportLoading }}>
      {children}
    </AuthContext.Provider>
  );
};

export const useAuth = () => useContext(AuthContext);

Reports.js

import { useAuth } from './AuthContext';

const Reports = () => {
  const { reportLoading } = useAuth();

  const renderContent = () => {
    if (reportLoading === 1) return (
      // 加载动画组件
    )

    if (reportLoading === 2) return (
      // 报告内容组件
    )
  }

  return (
    <DashboardLayout>
      {renderContent()}
    </DashboardLayout>
  )
}

为什么直接调用函数会失败 #

setReportLoading是Reports组件内部的函数，属于组件实例的一部分——每次组件渲染都会生成新的函数实例，且组件未挂载时该函数根本不存在。跨组件直接调用内部函数不符合React的组件隔离逻辑，必须通过状态管理工具或Context来共享状态和更新逻辑。

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