React + TS：如何從 React 功能組件外部調用方法

Question

我想知道如何從 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();
            });
        })
    }
}

組織鎖.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)

任何幫助將不勝感激！

Answer 1

我已經重組了所有內容，使其更易於理解，希望您不要介意我認為您想要上面的評論。

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

您可以在此處查看示例

Answer 2

您可以創建新的 .js 文件，如 Helpers.js 並定義帶有參數的導出函數

export function getUsedLockers(lockerData) {
    let amount = 0;

    //Check your loop it can be like that
    for (let i = 0; i < lockerData.length; i++) {
        if (!lockerData[i].is_currently_claimable) {
            amount++;
        }
    }
    console.log('log from getusedlockers, amount: ', amount)
    return (amount)
}

然后將其導入到您要使用的位置。

import {getUsedLockers} from "../Helpers";

並像這樣使用它：

const amount = getUsedLockers(data);