小编ent*_*one的帖子

我有一个产品页面/products/[slug].js

我对 wordpress/graphql 站点使用增量静态生成：

export async function getStaticProps(context) {

    const {params: { slug }} = context

    const {data} = await client.query(({
        query: PRODUCT_SLUG,
        variables: { slug }
    }));

    return {
        props: {
            categoryName: data?.productCategory?.name ?? '',
            products: data?.productCategory?.products?.nodes ?? []
        },
        revalidate: 1
    }

}

export async function getStaticPaths () {
    const { data } = await client.query({
        query: PRODUCT_SLUGS,
    })

    const pathsData = []

    data?.productCategories?.nodes && data?.productCategories?.nodes.map((productCategory) => {
        if (!isEmpty(productCategory?.slug)) {
            pathsData.push({ params: { slug: productCategory?.slug } …

在react-query的快速入门文档中，有以下示例：

// Create a client
const queryClient = new QueryClient();

const App = function () {
  return (
    // Provide the client to your App
    <QueryClientProvider client={ queryClient }>
      <Todos />
    </QueryClientProvider>
  );
};

const Todos = function () {

  // Access the client
  const queryClient = useQueryClient();

  // ...

  return (
    <>
      ...
    </>
  );
};

但我不明白为什么我应该在 Todos 中使用 useQueryClient 挂钩。

// Access the client
const queryClient = useQueryClient();

我的意思是我不能queryClient从主文件中导出实例：

// App.js
export const queryClient …

我创建了一个 React 钩子：

interface Person {\n    name: string\n    age: number\n}\n\nexport const usePerson = function <T extends Person, K extends keyof T>(): (property: K, setter: (value: T[K]) => T[K]) => void {\n\n    const setPersonProperty = (property: K, setter: (value: T[K]) => T[K]): void => {\n        console.log(property, setter)\n    }\n\n    setPersonProperty(\'name\', (x) => x)\n\n    return setPersonProperty;\n}\n

我已经从打字稿文档中看到了该模式<T, K extends keyof T>，但我无法在我的示例中正确使用它。

更具体地说，打字稿在线抱怨

setPersonProperty(\'name\', (x) => x)\n

虽然当我开始输入setPersonProperty(\'n /* IDE autocompletes name */但抱怨参数时\'name\'，我收到以下错误： …

我的代码是这样的：

export interface TreeItem {\n  id: string;\n  children: this[];\n  collapsed?: boolean;\n}\n\nconst createTreeItem = <T extends TreeItem>(): T => {\n  return {\n    id: 'root',\n    children: []\n  }\n}\n

但我收到一个错误，其返回类型createTreeItem如下：

\n

TS2322: 类型“ { id: string; children: never[]; }”不可分配给\n类型“ T”。\xc2\xa0\xc2\xa0' { id: string; children: never[]; }' 可分配给\n类型“ ”的约束T，但“ T”可以使用不同\n约束子类型' 进行实例化TreeItem。

\n

我完全不知道这是什么意思。

有什么帮助吗？

我创建了一个 axios 拦截器：

instance.interceptors.response.use(async (response) => {
    return response.data;
  }, (err) => {
    return Promise.reject(err);
  });

它获取response并返回该data属性。

对象response是类型的AxiosResponse<any, any>，data属性只是类型的数据AxiosResponse<any, any>.data。

问题是当我使用这个 axios 客户端时

const instance = axios.create({...});
// ...etc
// add interceptor

然后我这样做：

customAxiosClient.get().then((data: /* here data is of type AxiosResponse instead of AxiosResponse.data */)

如何解决这个问题？

有没有办法保留调用去抖函数的所有参数，将它们保存在队列中，然后触发单个批处理操作？

例如：

const debounceWithQueue = _.debounce(myFn, 1000);

debounceWithQueue(1);
debounceWithQueue(2);
debounceWithQueue(3);

一秒钟过去后，我希望我的函数myFn使用参数执行[1, 2, 3]

myFn([1, 2, 3]);

另外，如果 1 秒过去或队列达到一定大小，是否可以触发（记录 debounceWithQueue 函数被调用的次数）

我使用反应库前。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逻辑？