重命名反应钩子属性的好习惯？

Question

我使用反应库前。react-query。这个库提供了一个钩子useQueryex。

const {data, isLoading} = useQuery(['users'], userService.getUsers);

我的问题是，如果我想使用两个useQuery钩子，以避免重复的命名变量：

data, isLoading

我必须做这样的事情：

const users = useQuery(['users'], userService.getUsers);
const products = useQuery(['products'], userService.getProducts);

...
// then use
users.data, users.isLoading
// and
products.data, products.isLoading
...

为了使这个逻辑更加一致，我尝试制作自己的自定义挂钩并重命名useQuery内部提供的属性，以便我可以使用扩展语法进行访问。

function useGetUsers(){
    const {data, isLoading} = useQuery(['users'], userService.getUsers);
    return {
        usersData: data,
        isUsersLoading: isLoading
    }
}

和产品一样。

现在，我可以将前面的示例写为：

const {usersData, isUsersLoading} = useGetUsers();
const {productsData, isProductsLoading} = useGetProducts();

当然，为了拥有所有的键，我迭代了useQuery钩子提供的所有键，并用我自己的驼峰大小写规则等定制了我自己的自定义键。

我的问题是，这样可以吗？我的意思是，这被认为是一个好的做法还是只是符合users.isLoading逻辑？

Answer 1

我发现令人惊讶的是，该钩子返回一个对象而不是像那样的数组useState，因为这就是返回数组的原因。 useState（我不熟悉那个钩子；也许它会返回很多东西，在这种情况下使用命名属性确实有意义。）

您可以在解构中使用重命名：

const {data: users, isLoading: usersLoading} = useQuery(['users'], userService.getUsers);
const {data: products, isLoading: productsLoading} = useQuery(['products'], userService.getProducts);

然后将users和用于usersLoading用户的东西，和products/productsLoading用于产品的东西。

如果您要编写自己的钩子，我想我宁愿编写一个返回数组的通用钩子：

function useStuff(what, how) {
    const {data, isLoading} = useQuery(what, how);
    return [data, isLoading];
}

然后：

const [users, usersLoading] = useStuff(['users'], userService.getUsers);
const [products, productsLoading] = useStuff(['products'], userService.getProducts);