使用函数中的方法做出反应答案

【问题标题】：React using methods within a function使用函数中的方法做出反应
【发布时间】：2021-05-08 03:27:23
【问题描述】：

我正在尝试在 React 中创建一个参考服务组件，它将保存所有包含大量数据的地图。我已经加载了数据，但我无法从该组件外部访问数据。

const ReferenceService = () => {

  const dispatch = useDispatch();
  const referenceTables = useSelector(selectReferenceTables);
  const referenceServiceStatus = useSelector((state) => state.referenceService.status);

  useEffect(() => {
    if(referenceServiceStatus === 'idle'){
      dispatch(loadReferenceTables())
    }
  }, [referenceServiceStatus, dispatch]);

  const getReferenceTables = () => {
    return referenceTables;
  };

  const getReferenceTable = (tableName) => {
    return referenceTables[tableName];
  };

}
export default ReferenceService;

我试过了：

import ReferenceService from '../referenceService/ReferenceService';

const getRef = () => {
  console.log(ReferenceService.getReferenceTables());
}

并得到未处理的拒绝 (TypeError)：referenceService_ReferenceService__WEBPACK_IMPORTED_MODULE_6_.default.getReferenceTables 不是函数

我将如何重写这个组件以便我可以访问这些功能？

【问题讨论】：

标签： reactjs react-redux components

【解决方案1】：

ReferenceService没有导出getReferenceTables，把它拿出来导出或者改逻辑

【讨论】：

我试过了，但后来我无法从 useSelector(selectReferenceTables); 访问参考表；
为什么不直接让 ReferenceService 返回 referenceTables？
因为我想向它添加其他方法，比如 getReferenceTable 它只返回表的 1，而 getEntry 解析但只返回一个表中的一个条目

【解决方案2】：

找到了解决办法..

我只需要添加

return {getReferenceTables, getReferenceTable, getEntry};

到 ReferenceService 然后添加

const {getReferenceTables, getReferenceTable, getEntry} = ReferenceService();

到我想用它的地方。

【讨论】：