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

Question

我使用了一个 React 库 ex。 react-query。这个库提供了一个钩子 useQuery ex.

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 hook提供的所有键，并用我自己的驼峰规则等定制了我自己的自定义键

我的问题是，这样可以吗？我的意思是，这是一个好的做法还是只遵循 users.isLoading 逻辑？？

Answer 1

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

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

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

然后使用 users 和 usersLoading 作为用户的东西，products/productsLoading 作为产品的东西。

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

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

Answer 2

我创建了一个自定义挂钩，在其中我从 returned React 查询对象解构我需要的项目，然后 return 一个数组。然后你可以在使用时重命名它们。


// Custom Hook
function useGetUsers(){
    const {data, isLoading} = useQuery(['users'], getUsers);
    return [data, isLoading]
}

function getUsers() {
    // fetch stuff
}

---

// Calling the hook

const [usersData, usersLoading] = useGetUsers()

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

A good practice for renaming properties of a react hook?

javascript

reactjs

properties

react-hooks

dynamically-generated