如何从Express后端调用React TypeScript的前端函数？

你之前尝试直接导出前端函数给后端调用的方案行不通，本质原因是前端React组件的状态更新函数依赖React运行环境，后端没有React上下文，根本无法直接调用这类函数。下面是几种可行的实现思路：

方法一：前端轮询后端状态接口 #

后端在加载阶段（比如文件下载时）维护当前的加载状态，前端定时请求接口获取状态并更新文本：

前端实现（Home.tsx） #

import { useState, useEffect } from 'react';

const Home = () => {
  const [loadingText, setLoadingText] = useState('');
  
  const setLoadingTextFunction = (text: string) => {
    setLoadingText(text);
  };

  // 每秒轮询一次后端状态
  useEffect(() => {
    const statusPoller = setInterval(async () => {
      try {
        const res = await fetch('/api/loading-status');
        const { isLoading, text } = await res.json();
        setLoadingTextFunction(isLoading ? text : '');
      } catch (err) {
        console.error('Failed to fetch loading status:', err);
      }
    }, 1000);

    return () => clearInterval(statusPoller);
  }, []);

  return <div className="loading-text">{loadingText}</div>;
};

export default Home;

后端实现示例（Node.js/Express） #

// 后端维护加载状态（可根据实际情况用缓存/数据库存储）
let currentLoadingStatus = {
  isLoading: false,
  text: ''
};

// 模拟文件下载过程
const simulateFileDownload = async () => {
  currentLoadingStatus = { isLoading: true, text: 'Downloading server files...' };
  // 执行下载逻辑
  await new Promise(resolve => setTimeout(resolve, 5000));
  currentLoadingStatus = { isLoading: false, text: '' };
};

// 状态查询接口
app.get('/api/loading-status', (req, res) => {
  res.json(currentLoadingStatus);
});

方法二：后端通过WebSocket主动推送状态 #

如果需要实时性更高的同步，用WebSocket建立前后端长连接，后端在加载阶段主动推送状态：

前端实现（Home.tsx） #

import { useState, useEffect } from 'react';

const Home = () => {
  const [loadingText, setLoadingText] = useState('');
  
  const setLoadingTextFunction = (text: string) => {
    setLoadingText(text);
  };

  useEffect(() => {
    const socket = new WebSocket('ws://your-backend-domain/ws');
    
    socket.onmessage = (event) => {
      const { type, text } = JSON.parse(event.data);
      if (type === 'loading-update') {
        setLoadingTextFunction(text);
      }
    };

    socket.onerror = (err) => {
      console.error('WebSocket error:', err);
    };

    return () => socket.close();
  }, []);

  return <div className="loading-text">{loadingText}</div>;
};

export default Home;

后端实现示例（Node.js ws库） #

const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });

// 模拟文件下载并推送状态
const startFileDownload = async () => {
  // 向所有连接的客户端推送加载开始消息
  wss.clients.forEach(client => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(JSON.stringify({
        type: 'loading-update',
        text: 'Downloading server files...'
      }));
    }
  });

  // 执行下载逻辑
  await new Promise(resolve => setTimeout(resolve, 5000));

  // 推送加载结束消息
  wss.clients.forEach(client => {
    if (client.readyState === WebSocket.OPEN) {
      client.send(JSON.stringify({
        type: 'loading-update',
        text: ''
      }));
    }
  });
};

方法三：前端触发操作时主动控制状态 #

如果后端加载是由前端操作触发的（比如用户点击下载按钮），可以直接在前端发起请求时先设置加载文本，再根据请求结果更新：

// Home.tsx
const handleInitiateDownload = async () => {
  setLoadingTextFunction("Downloading server files...");
  try {
    const res = await fetch('/api/trigger-download');
    if (!res.ok) throw new Error('Download failed');
    // 处理下载结果（比如保存文件）
  } catch (err) {
    setLoadingTextFunction('Download failed, please try again');
  } finally {
    // 下载完成/失败后延迟清空文本
    setTimeout(() => setLoadingTextFunction(''), 3000);
  }
};

内容的提问来源于stack exchange，提问作者Zalán Csőke