RTK 查询无法在 React React（带 TS）挂钩“MultiBrandAPI.myMutation”中使用处理程序突变被有条件地调用。

Question

因此，我们正在迁移到RTK查询。我们已经能够毫无问题地进行查询。但是现在我们正在尝试发表一篇文章，并发生以下问题。

这是我在component.tsx文件中的功能：

const [postToken] = MultiBrandAPI.useNewPartnerTokenPostMutation();

const handleNavigateToPartner = async(partner: Partner) => {

    const auth = SessionSlice.getInitialState().token;
    try {
        const result = await postToken({
            id: partner.id,
            token: auth
        }).unwrap();
        console.log(result);
    } catch (err) {
        console.log(err);
    }
};

这是我的api.ts文件：

import {Partner} from '@libs/partner';
import {createApi} from '@reduxjs/toolkit/query/react';

import {BaseQueryWithAuth} from '../redux/rtk-query';

interface PostObject {
    id: string,
    token: string | undefined
}

export default createApi({
    reducerPath: 'multiBrandAPI',
    baseQuery: BaseQueryWithAuth,
    endpoints: (builder) => ({
        newPartnerTokenPost: builder.mutation<string, PostObject>({
            query: ({id, token}: PostObject) => ({
                url: `u/${id}/token`,
                method: 'POST',
                body: `Authorization ${token}`
            }),
            invalidatesTags: [{type: 'Partners', id: 'LIST'}],
        }),
        getAllPartners: builder.query<Partner[], void>({
            query: () => ({url: 'auth/login'}),
            providesTags: () => {
                return [{type: 'Partners'}];
            }
        }),
    }),
    tagTypes: ['Partners']
});

我在控制台上遇到此错误：

反应钩 称为“乘法 有条件。必须以完全相同的顺序调用react钩子 每个组件渲染。您是否意外地打电话给React Hook 提早回报？反应钩/钩规则 BlockQuote

Answer 1

这与发布 POST 无关——你只是违反了 hooks 规则。

您必须在根级别（而不是在任何回调中）的组件函数中调用 useNewPartnerTokenPostMutation，而不是在 if/else 块内部以及任何可能的 return 之前代码>声明。 React 中的任何其他钩子也是如此。