在React Native中使用RTK Query时如何避免重复渲染？

你的代码触发了无限渲染循环：请求成功后调用dispatch(login())会更新Redux状态，导致组件重新渲染；组件重新渲染时又会检查isSuccess，再次执行storeToken和dispatch(login())，往复循环引发了React Native错误。

修复方案 #

• 利用RTK Query的onQueryStarted生命周期：将成功后的逻辑移到API切片的查询配置中，避免在组件渲染阶段执行状态更新操作，确保逻辑只执行一次

  const apiSlice = createApi({
    reducerPath: 'api',
    baseQuery: fetchBaseQuery({ baseUrl: '/' }),
    endpoints: (builder) => ({
      loginRequest: builder.mutation({
        query: (credentials) => ({
          url: '/login',
          method: 'POST',
          body: credentials,
        }),
        async onQueryStarted(args, { dispatch, queryFulfilled }) {
          try {
            const { data } = await queryFulfilled;
            console.log("success");
            storeToken(data.token);
            dispatch(login());
          } catch (err) {
            // 可添加错误处理逻辑
          }
        },
      }),
    }),
  });
  

• 若必须在组件内处理：用useEffect包裹逻辑，依赖isSuccess，确保仅在isSuccess从false变为true时执行一次

  useEffect(() => {
    if (isSuccess) {
      console.log("success");
      storeToken(data.token);
      dispatch(login());
    }
  }, [isSuccess, data.token, dispatch]);
  

核心问题解析 #

组件顶层代码会在每次渲染时执行，而dispatch(login())触发的状态变化会再次引发组件渲染，最终形成无限循环。将逻辑转移到RTK Query的生命周期或useEffect中，能精准控制执行时机，避免重复渲染。

内容的提问来源于stack exchange，提问作者Raghuram