React-Meteor中JS调用TSX组件报错：RoomList不是函数

核心问题分析 #

1. 组件导出错误：你的room.tsx中定义的RoomList没有添加导出声明，导致edit.js里的导入无效，RoomList实际为undefined，因此报“不是函数”的错误。
2. 组件调用方式错误：React函数组件不能像普通工具函数那样直接调用，这种操作脱离了React的渲染上下文，即使导出正确，手动调用也会触发hooks规则报错。

分步解决方案 #

1. 修正RoomList的导出 #

在room.tsx中给RoomList添加导出声明，二选一即可：

方式一：命名导出

import { ReactElement } from 'react';
// 其他导入...

export const RoomList = (): ReactElement => {  
    usePreventDefault(ref);
    useShortcutOpenMenu(ref);
    useSidebarPaletteColor();

    return (
        <Box h='full' w='full' ref={ref}>
            <Virtuoso
                totalCount={roomsList.length}
                data={roomsList}
                components={{ Scroller: ScrollerWithCustomProps }}
                computeItemKey={computeItemKey}
                itemContent={(_, data): ReactElement => <RoomListRow data={itemData} item={data} />}
            />
        </Box>
    );
};

对应edit.js的导入保持不变（注意补全语法细节）：

import { RoomList } from '../../room';

方式二：默认导出

import { ReactElement } from 'react';
// 其他导入...

const RoomList = (): ReactElement => {  
    // 原有代码...
};

export default RoomList;

对应edit.js的导入改为：

import RoomList from '../../room';

2. 正确实现保存后的组件刷新逻辑 #

React组件的刷新依赖状态/数据变化，结合Meteor特性，推荐两种方案：

方案一：利用Meteor数据订阅自动刷新（推荐）

如果roomsList来自Meteor集合，使用useTracker订阅数据，当saveRoom修改集合数据后，useTracker会自动触发组件重新渲染：

import { useTracker } from 'meteor/react-meteor-data';
import { RoomsCollection } from '../collections/Rooms'; // 替换为你的实际集合路径
import { ReactElement } from 'react';
// 其他导入...

export const RoomList = (): ReactElement => {  
    usePreventDefault(ref);
    useShortcutOpenMenu(ref);
    useSidebarPaletteColor();

    // 订阅并实时获取最新房间数据
    const roomsList = useTracker(() => {
        Meteor.subscribe('rooms'); // 替换为你的实际订阅名称
        return RoomsCollection.find({}).fetch();
    });

    return (
        <Box h='full' w='full' ref={ref}>
            <Virtuoso
                totalCount={roomsList.length}
                data={roomsList}
                components={{ Scroller: ScrollerWithCustomProps }}
                computeItemKey={computeItemKey}
                itemContent={(_, data): ReactElement => <RoomListRow data={itemData} item={data} />}
            />
        </Box>
    );
};

saveData执行成功后，Meteor集合数据更新，RoomList会自动刷新，无需手动操作。

方案二：通过父组件状态控制刷新

如果roomsList是本地状态，在父组件中维护数据状态，saveData成功后重新获取最新数据并更新状态，RoomList会因props变化自动刷新：

父组件示例：

import { useState } from 'react';
import { RoomList } from './room';
import { saveRoom } from './api';

const ParentComponent = () => {
    const [rooms, setRooms] = useState([]);

    // 自定义函数：获取最新房间数据
    const fetchLatestRooms = async () => {
        const res = await fetch('/api/rooms'); // 替换为你的实际数据接口
        return res.json();
    };

    const saveData = async () => {
        await saveRoom({ guestData, roomData });
        // 重新获取数据并更新状态
        const updatedRooms = await fetchLatestRooms();
        setRooms(updatedRooms);
    };

    return (
        <>
            <button onClick={saveData}>保存房间</button>
            <RoomList roomsList={rooms} />
        </>
    );
};

room.tsx修改为接收props：

import { ReactElement } from 'react';
// 其他导入...

interface RoomListProps {
    roomsList: Array<any>; // 替换为你的房间数据类型
}

export const RoomList = ({ roomsList }: RoomListProps): ReactElement => {  
    usePreventDefault(ref);
    useShortcutOpenMenu(ref);
    useSidebarPaletteColor();

    return (
        <Box h='full' w='full' ref={ref}>
            <Virtuoso
                totalCount={roomsList.length}
                data={roomsList}
                components={{ Scroller: ScrollerWithCustomProps }}
                computeItemKey={computeItemKey}
                itemContent={(_, data): ReactElement => <RoomListRow data={itemData} item={data} />}
            />
        </Box>
    );
};

关键提醒 #

永远不要手动调用React组件函数来触发刷新，这种操作会破坏React的状态管理机制，导致hooks报错或组件无法正确更新。组件的刷新必须由React通过状态变化、props变化或数据订阅更新来自动触发。

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