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

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)

Любая помощь будет принята с благодарностью!

Answer 1

Я реструктурировал все, чтобы сделать его более понятным, я надеюсь, что вы не возражаете против того, что, как я думаю, вам нужно, чтобы комментарий был выше.

locker-model.ts - The тип для конкретных данных, вызываемых обратно, найден

export type Locker = {
  id: number;
  guid: string;
  isCurrentlyClaimable: boolean;
}

locker-business.ts - Где выполняется вся бизнес-логика c, от запроса данных до расчеты на его основе

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