Question

我正在使用以下代码通过钩子从两个不同的源获取数据。

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

第一个异步调用getPermissionsForRole返回一个字符串数组，第二个getAllPermissions返回一个对象数组，然后我将其解析为util方法以创建另一个对象数组。

使用空数组作为useEffect中的第二个参数，连续的异步调用被停止，但是当我在availablePermissionsInRole方法中检查getAllPermissions时，它是空的。当我将availablePermissionsInRole作为第二个参数传递时，会发生连续循环。

这段代码我在做什么错。请指导我，因为我是新来应对钩子的人。

Answer 1

我找到了useEffect无限循环的解决方案，并且由于我将availablePermissionsInRole作为第二个参数传递，因此react只看待数组引用并将其视为新数组，因此无限循环。为了解决这个问题，我首先传递了以下内容作为参数。

availablePermissionsInRole.length

，除非后端发送新的数组元素，否则它将保持不变。然后再次可以更改数组中的字符串而无需更改长度，因此我使用以下内容作为解决问题的论据。

availablePermissionsInRole.toString()

如果还检索到新字符串，则随后更改。

谢谢大家的帮助，但请指出我使用的方法是否存在任何错误。

异步功能连续运行

1 个答案: