Asyn c функция работает непрерывно - PullRequest
Новая
       20

Asyn c функция работает непрерывно

1 голос
/ 24 марта 2020

Я использую следующий код для извлечения данных из двух разных источников в реакции с использованием хуков. 

const [ permissionTree, setPermissionTree ] = useState([]);
const [ availablePermissionsInRole, setAvailablePermissionsInRole ] = useState<Permission[]>([]);

const getAllPermissions = (): void => {
    getPermissionList()
        .then(response => {
            if (response.status === 200 && response.data && response.data instanceof Array) {
                const permissionStringArray = response.data;
                let permissionTree: Permission[] = [];

                permissionTree = permissionStringArray.reduce((arr, path) => addPath(
                    path, path.resourcePath.replace(/^\/|\/$/g, "").split('/'), arr,
                ), []);

                setPermissionTree(permissionTree);
            }
        })
        .catch(error => {
            //Handle Permission Retrieval Properly
        })
}

/**
 * Retrieve permissions for a given role if in Role edit mode.
 */
useEffect(() => {
    if (isEdit && roleObject) {
        getPermissionsForRole(roleObject.id)
            .then(response => {
                if (response.status === 200 && response.data instanceof Array) {
                    const permissionsArray: Permission[] = [];
                    response.data.forEach(permission => {
                        permissionsArray.push({
                            id: permission,
                            isChecked: false,
                            fullPath: permission
                        })
                    })
                    setAvailablePermissionsInRole(permissionsArray);
                    getAllPermissions();
                }
            })
            .catch(error => {
                //Handle Role Retrieval Properly
            })
    } else {
        getAllPermissions();
    }
}, [])

Первый асинхронный c вызов getPermissionsForRole возвращает строковый массив, а второй getAllPermissions возвращает массив объектов, которые я затем анализирую в методе util для создания другого массива объектов.

С пустым массивом в качестве второго аргумента в useEffect непрерывный асинхронный вызов c остановлен но когда я проверяю availablePermissionsInRole внутри getAllPermissions метода, он пуст. Когда я передаю availablePermissionsInRole в качестве второго аргумента, возникает непрерывная l oop.

Что я делаю не так в этом коде. Пожалуйста, ведите меня, так как я новичок в реакции крючков.

1 Ответ

0 голосов
/ 24 марта 2020

Я нашел решение для бесконечного l oop из useEffect и, поскольку я передаю availablePermissionsInRole в качестве второго аргумента, реагирует только на ссылку на массив и обрабатывает его как новый массив, следовательно, бесконечный l oop. Чтобы исправить это, я сначала передал следующее в качестве аргумента. 

availablePermissionsInRole.length

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

availablePermissionsInRole.toString()

, который затем изменяется, если новая строка также извлекается.

Спасибо всем за помощь, но укажите, есть ли какие-либо ошибки в подходе, который я использовал.

...