javascript - React + TS:如何从 React 功能组件外部调用方法
问题描述
我想知道如何从 React 功能组件外部调用方法。我编写了 GetUsedLockers() 函数,它获取所有使用过的储物柜并返回金额。现在我想从另一个组件(OrgLocker.tsx)调用这个函数,并在那里显示来自 getUsedLockers() 函数的数据。
OrgLockerTables.tsx
const OrgLockerTables: React.FC = () => {
const lockerCall = 'lockers';
const [lockerData, setLockerData] = useState({
id: 0,
guid: "",
is_currently_claimable: false
}[""]);
useEffect(() => {
componentConsole().then((res) => {
setLockerData(res);
})
// eslint-disable-next-line
}, []);
if (!lockerData) return (<div>Loading...</div>);
//function to get all used lockers
function getUsedLockers() {
let amount = 0;
for (let i = 0; i < lockerData.length; i++) {
if (!lockerData.is_currently_claimable) {
amount++;
}
}
console.log('log from getusedlockers, amount: ', amount)
return (amount)
}
// function to get JSON data from the API
function componentConsole(): Promise<any> {
return new Promise<any>((resolve, reject) => {
http.getRequest('/' + lockerCall).then((res) => {
let data = res.data.data;
console.log('data:', data);
resolve(res.data.data);
}).catch((error) => {
console.log(error);
reject();
});
})
}
}
orgLocker.tsx
import OrgLockerTables from '../tables/orgLockerTables';
const OrgLockers: React.FC = () => {
let lockerTable = new OrgLockerTables();
return (
<div className="main-div-org">
<p>Used</p>
<p>{lockerTable.getUsedLockers()}</p>
</div>
);
}
export default OrgLockers;
当尝试调用 OrgLockerTables 并将其存储在 lockerTable 中时,会出现以下错误:
预期 1-2 个参数,但得到 0.ts(2554)
任何帮助将不胜感激!
解决方案
我已经对所有内容进行了重组,使其更易于理解,我希望你不介意我认为你想要上面的评论。
locker-model.ts - 找到被回调的特定数据的类型
export type Locker = {
id: number;
guid: string;
isCurrentlyClaimable: boolean;
}
locker-business.ts - 执行所有业务逻辑的地方,从数据调用到基于它的计算
import { Locker } from "./locker-models";
const lockerCall = 'lockers';
const mockedData: Locker[] = [{
id: 0,
guid: "sample",
isCurrentlyClaimable: false,
},
{
id: 1,
guid: "sample2",
isCurrentlyClaimable: true,
},
{
id: 2,
guid: "sample3",
isCurrentlyClaimable: true,
}]
// Mocked function from your backend (componentConsole where you use lockerCall variable)
export const getLockersData = (): Promise<Locker[]> => Promise.resolve(mockedData);
export const getAmount = (lockers: Locker[]): number => {
let amount = 0;
!!lockers ?
lockers.filter(({isCurrentlyClaimable}) => { if(isCurrentlyClaimable) amount++ })
: 0;
return amount;
};
index.tsx - 这两个组件都会调用以获取数据并呈现您正在寻找的结果
import React, { Component } from 'react';
import { Locker } from './locker-models';
import { getLockersData, getAmount } from './locker-business';
import './style.css';
type OrgLockersProps = {
amount: number;
}
const OrgLockers: React.FC<OrgLockersProps> = ({ amount }) => {
return (
<div className="main-div-org">
<p>Lockers used:</p>
<p>{amount}</p>
</div>
);
}
type OrgLockerTableProps = {};
const OrgLockerTable : React.FC<OrgLockerTableProps> = props => {
const [lockerData, setLockerData] = React.useState<Locker[]>([]);
React.useEffect(() => {
getLockersData().then(response => setLockerData(response));
}, []);
const amount = getAmount(lockerData);
return (
<div>
<OrgLockers amount={amount} />
</div>
);
};
您可以在此处查看示例
推荐阅读
- sql-server - SQL Server 性能相关
- ios - Xcode '找不到 Info.plist 路径。'
- docker - 如果 RUN 在多阶段构建中失败,则使 Docker 构建停止
- ansible - 如何在 Ansible 中将变量放入变量中?
- marklogic - cts 搜索空格敏感
- cytoscape - 如何使用来自 Phytozome 的基因 id 为高粱基因列表创建节点和边
- python - 使用 exec 导入特定模块的优缺点?
- mysql - 使用 insert SET 语法可以插入多行吗?
- jersey-2.0 - 如何在泽西岛有问题地创建 WADL
- javascript - axios GET 中的 vue.js 多选更改选项