將 useEffect 設定的狀態參數傳遞給 RTK Query 的 queryFn

Question

我將布林參數 usingAsSignUp 傳遞到 queryFn 中。

不幸的是，usingAsSignUp 總是導致未定義！我如何獲得它的值？ usingAsSignUp 是由使用元件中的 useEffect 設定的狀態。

RTK 查詢 createApi 與 queryFn：

export const firebaseApi = createApi({
  reducerPath: "firebaseApi",
  baseQuery: fakeBaseQuery(),
  tagTypes: ["Auth"], //Optional, https://redux-toolkit.js.org/rtk-query/api/createApi#tagtypes
  endpoints: (builder) => ({
    authenticateWithFirebase: builder.mutation({
      async queryFn({ email, password, usingAsSignUp }) {
        try {
          const auth = getAuth(firebaseApp);
          const userCredential = usingAsSignUp ? 
          await createUserWithEmailAndPassword(auth, email, password) : 
          await signInWithEmailAndPassword(auth, email, password);
          return {
            data: {
              uid: userCredential?.user?.uid,
              email: userCredential?.user?.email,
              usingAsSignUp: usingAsSignUp,
            },
          };
        } catch (e) {
          return { error: e };
        }
      },
      providesTags: ["Auth"], //Optional, https://redux-toolkit.js.org/rtk-query/api/createApi#providestags
    }),
  }),
});

export const { useAuthenticateWithFirebaseMutation } = firebaseApi;

使用useEffect使用元件來設定傳遞給queryFn的狀態：

import { useAuthenticateWithFirebaseMutation } from "../../persistence/apiSlices";

  const [signup, setSignup] = useState(true);
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const location = useLocation();

  const [authenticateNow, result, data] = useAuthenticateWithFirebaseMutation();

  useEffect(() => {
    location.pathname === "/login" ? setSignup(false) : setSignup(true);
  }, [location.pathname] );

  async function onSubmitACB() {
    await authenticateNow({ email, password, signup });
  }

Answer 1

您正在將布林參數 usingAsSignUp 傳遞給 authenticateWithFirebase 突變端點的 queryFn，但它總是會導致 undefined< /代码>。這可能是因為您沒有從元件正確傳遞參數。

要修復此錯誤，您需要將usingAsSignUp 值作為signup 傳遞到authenticateWithFirebase 端點的queryFn在您的firebaseApi 配置中。

await authenticateNow({ email, password, usingAsSignUp: signup });