Недопустимая ошибка вызова ловушки с реакцией asyn c select - PullRequest
Новая
       39

Недопустимая ошибка вызова ловушки с реакцией asyn c select

0 голосов
/ 04 февраля 2020

Неверный вызов ловушки. Хуки можно вызывать только внутри тела компонента функции.

Я пытаюсь создать хук для загрузки параметров в реакции выбора. Вот мой код - 

import React, { useEffect } from "react";
import { useDispatch } from 'react-redux';

import {isEmpty, generateMenuEndPoint} from '../../helper/commonFunc';
import AsyncSelect from 'react-select/async';

import {searchMenuAction} from '../../app/actions/appAction';

export function AsyncSelectHooks(props) {
    const { index, formElement, isClearable, multiSelect, isDisabled, defaultOptions, parent, searchMenuDetails } = props;
    let { handleSelectInputChange, handleSelectChange, getOptionValue } = props.parent;

    const useFetchMenu = (searchItem) => {
        const dispatch = useDispatch();

        useEffect(() => {
                if(!isEmpty(searchMenuDetails)) {
                    let menuDetails = generateMenuEndPoint(searchMenuDetails, searchItem);

                    return new Promise((resolve, reject) => {
                        dispatch(searchMenuAction(menuDetails, (response) => {
                            resolve(response[menuDetails.getData]);
                        }));
                    })
                }
        }, [])
    }

    return (
        <AsyncSelect
            name={index}
            getOptionValue={getOptionValue}
            getOptionLabel={(option) => (formElement.elementConfig.name === "organizations") && parent.authorizationDetails && parent.authorizationDetails.organizationId < 1000 && option.type  ? (option.label || option.name) + ' ('+option.type+')' : (option.label || option.name || option.prefix)}
            value={formElement.value}
            placeholder=""
            isClearable={isClearable}
            isMulti={multiSelect}
            isDisabled={isDisabled}
            closeMenuOnSelect={multiSelect ? false : true}
            cacheOptions={true}
            defaultOptions={defaultOptions}
            loadOptions={(inputValue) => useFetchMenu(inputValue)}
            onChange={handleSelectChange}
            onInputChange={(value) => handleSelectInputChange(value, index)}
    />
    );
}

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

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

Редактировать:

Решил мою проблему, переместив мой код за пределы useEffects. 

    const dispatch = useDispatch();
    const fetchMenu = (searchItem) => {
            if(!isEmpty(searchmenudetails)) {
                let menuDetails = generateMenuEndPoint(searchmenudetails, searchItem);

                return new Promise((resolve, reject) => {
                    dispatch(searchMenuAction(menuDetails, (response) => {
                        resolve(response[menuDetails.getData]);
                    }));
                })
            }
        }

Я думаю, что useEffect здесь не требуется.

...