reactjs - 不能在回调中调用 useSelector

标签 reactjs react-redux react-hooks redux-toolkit

我对 redux/toolkit 很陌生。

我需要使用 redux hook 获取数据 useSelector在我的 react 功能组件中,但数据没有快速准备好,所以看起来 useSelector一开始会返回一个空数组,然后当数据准备好时,它会返回填充后的数据数组。

起初,我认为 useSelector 可以是异步的,但事实并非如此。每当我正在寻找的数据的值发生变化并且不适合我的功能需求时,Redux 都会重新呈现我的组件。在某些情况下,我不希望我的组件重新渲染(特别是当只有数据的一个原子部分发生变化时,奇怪的是我的所有组件也会重新渲染)。

我首先尝试的是将我的数据作为组件状态的一部分,这样我就可以决定何时更新它,我调用了 useSelector里面useState因为它接受回调

const [data, setData] = useState(()=> useSelector(...))

但是我得到了错误:

useSelector can not be called inside a callback

有什么建议吗?

最佳答案

您可以使用useEffect

const selectorData = useSelector(...);
const [data, setData] = useState(selectorData);

useEffect(() => {
  setData(selectorData)
}, [selectorData])

如果你这样做,组件不会每次都重新渲染,它只会在你的选择器数据到来时重新渲染。

关于reactjs - 不能在回调中调用 useSelector,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68580218/

相关文章:

javascript - 如何阻止多个重新渲染执行多个 api 调用 useEffect?

javascript - React 中的变更检测

javascript - 无法找到 ID 为 : b7zc6 的可拖动对象

javascript - 使用多个 es6 映射并使其异步

react-native - mobx 和 Redux 的优缺点是什么,特别是在 React-Native 环境中?

reactjs - 如何从mapDispatchToProps内部访问状态

javascript - 是否可以使用 React 中的 useState() 钩子(Hook)在组件之间共享状态?

javascript - 如何配置 create-react-app 以创建具有类而非函数的应用程序?

reactjs - 使用 setTimeout 延迟在 useEffect 中 react setInterval

typescript - 'ThunkAction' 类型的参数不可分配给 'AnyAction' 类型的参数