RTK 查询无法在 react (with TS) 钩子 "MultiBrandAPI.myMutation" 中使用 Mutation on hander 有条件地调用。

Question

所以我们要迁移到RTK查询。我们已经能够毫无问题地处理查询。但是现在我们正在尝试POST，结果出现了以下问题。

这是我在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 Hook"MultiBrandAPI.useNewPartnerTokenPostMutation"；被调用有条件地React Hooks在中的调用顺序必须完全相同每个组件渲染。你是不是不小心叫了React Hook提前返回？反作用钩子/钩子规则区块报价

Answer 1

这与POST无关——你只是违反了钩子的规则。

您必须在根级别(不在任何回调中(调用组件函数中的useNewPartnerTokenPostMutation，而不是在if/else块内部和任何可能的return语句之前。React中的任何其他钩子也是如此。