如何与 2 个 ReactJS 组件通信 - 使用 Jotai

Question

我有2个reactjs文件：

• Reports.js（用于请求报告并显示结果）
• AuthContext.js（有一个套接字连接来维持与后端服务器的通信）

用户首先转到 Reports.js 生成的报告页面，然后调用后端服务器，该服务器立即返回，但显示加载旋转器。报告完成后，会将数据发送到 AuthContext.js。但是，我在 AuthContext.js 中遇到问题，无法在 Reports.js 中请求调用 setReportLoading() 来停止加载微调器。你能告诉我如何解决这个问题吗？

我尝试了setReportLoading()下面的方法，但出现了这个错误：

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

这是我的代码片段

In file AuthContext.js
import { setReportLoading } from 'Reports';

export const AuthProvider = ({ children }) => {

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

In file 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;

UPDATE尝试使用jotai但不知何故没有崩溃，但它似乎没有转到handleReportloadingChange()函数

in 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);
    }
  });

  // ...
};

in Reports.js

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

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

  useEffect(() => {
    // This function will run every time the value of reportloadingAtom changes
    function handleReportloadingChange() {
      console.log("handleReportloadingChange")
      setLoading(reportloading);
    }

  }, [reportloading]);

  // ...
};

Answer 1

我认为如果没有第三方库，您就无法导出或导入在 React 组件内声明的函数。您可以做的是将其作为道具传递给子组件。

鉴于您共享的代码，我建议您将 AuthProvider 重构为常规函数，而不是 React 组件。我建议这样做是因为我没有将您的 AuthProvider 视为报告组件的子组件。然后，您可以在报告组件中调用此函数并让它返回一些值，然后更改加载的值。