重新选择错误：选择器创建者希望所有输入选择器都是函数

Posted 2023-02-19

【中文标题】重新选择错误：选择器创建者希望所有输入选择器都是函数

【英文标题】：Reselect error: Selector creators expect all input-selectors to be functions

【发布时间】：2020-05-09 18:05:32

【问题描述】：

我正在尝试在我的组件中使用重新选择：

  const test = useSelector(( test ) => test);
  const testData = createSelector(
    test,
    items => console.log(items),
  );

我收到Error: Selector creators expect all input-selectors to be functions, instead received the following types: [object]。我不知道这是否重要，但测试是异步的。 我该怎么做才能让它发挥作用？

谢谢！

【问题讨论】：

不确定您是否在本文中有类似的内容，但值得检查：decembersoft.com/posts/… 也许您在代码的其他区域存在循环依赖，因为您没有发布有关错误的更多详细信息。

你似乎混淆了useSelector和createSelector的用法。 createSelector 返回一个可供 useSelector 使用的选择器

【参考方案1】：

我遇到了同样的问题，但基于 react-redux documentation，这就是你应该如何使用 Reselect 和 useSelector：

import React from 'react'
import  useSelector  from 'react-redux'
import  createSelector  from 'reselect'

const selectNumCompletedTodos = createSelector(
  (state) => state.todos,
  (todos) => todos.filter((todo) => todo.completed).length
)

export const CompletedTodosCounter = () => 
  const numCompletedTodos = useSelector(selectNumCompletedTodos)
  return <div>numCompletedTodos</div>


export const App = () => 
  return (
    <>
      <span>Number of completed todos:</span>
      <CompletedTodosCounter />
    </>
  )

【参考方案2】：

您的代码似乎有点倒退。

useSelector expects a selector function as its argument, calls the selector, and returns the result.

那个 sn-p 似乎试图使用来自useSelector 的返回值作为createSelector 的输入，这是错误的。

此外，您不应该在组件内部调用createSelector，因为这会在每次组件呈现时创建一个新的记忆选择器实例。

最后，虽然我意识到这可能只是为了验证一切是否正常，但您不应该在选择器中进行 console.log() 之类的工作。选择器应该只返回一个值。

如果这个test 值不立即存在，那么您的选择器和组件逻辑应该以处理它可能不存在的情况的方式编写。