React-RTK：Selector unknown returned a different result when called with the same parameters.

最新推荐文章于 2025-03-07 16:30:53 发布

奋斗的小栗子

最新推荐文章于 2025-03-07 16:30:53 发布

阅读量1.2k

点赞数 4

分类专栏： TypeScript React 文章标签： react.js 前端 typescript

本文链接：https://blog.youkuaiyun.com/qq_36968599/article/details/135932539

版权

TypeScript 同时被 2 个专栏收录

9 篇文章

订阅专栏

React

1 篇文章

订阅专栏

文章讲述了在React项目中，使用redux-toolkit编写Redux逻辑时，如何解决`useSelector`返回的引用问题导致的不必要的重新渲染。作者提供了通过添加空默认值来避免引用改变的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在 React 项目中，使用 redux-toolkit 编写 Redux 逻辑，有如下代码：

// store/hooks
import { TypedUseSelectorHook, useSelector, useDispatch } from 'react-redux';
import type { RootState, APPDispatch } from "./index";

// 在整个应用程序中使用，而不是简单的 `useDispatch` 和 `useSelector`
export const useAppDispatch: () => APPDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

// RoleTab 组件中
import { useAppDispatch, useAppSelector } from "../../../../store/hooks";
const RoleTab = () => {
	// 这行代码导致的报错
	const tabList = useAppSelector(state => state.tabInfo.tabList || []);
	// 其他代码...
}

执行代码之后，报错如下：

useSelector.ts:205：Selector unknown returned a different result when called with the same parameters. This can lead to unnecessary rerenders. Selectors that return a new reference (such as an object or an array) should be memoized.
翻译过来就是:
当使用相同的参数调用时，未知选择器返回不同的结果。这可能会导致不必要的重新渲染。新引用应该被缓存。

const tabList = useAppSelector(state => state.tabInfo.tabList || []);

在上述代码中，当 tate.tabInfo.tabList 是 undefined 时，tabList 是 []；当 tate.tabInfo.tabList 有实际值之后，tabList 是实际值，tabList 的引用发生了改变，在 reduc-toolkit 中，更新 state 时不能更新引用。

解决方案：

const tabList = useAppSelector(state => state.tabInfo.tabList) || [];