Question

我正在如下使用反应钩子。

我等待通过useSelector react-redux挂钩加载用户对象，然后更新useFirestoreConnect挂钩使用的firebase查询。

const MyComponent = () => {
  const [query, setQuery] = useState({
    collection: 'account',
    query: [['userId', '==', user.uid]]
  })

  const user = useSelector(state => state.firebase.profile)

  useFirestoreConnect(query)

  useEffect(() => {
    const userId = user.uid ? user.uid ? null
    setQuery({
      collection: 'account',
      query: [['userId', '==', null]]
    })
  }, [user, initialQuery])
}

由于每次传递给useFirestoreConnect的对象都是新对象，因此它将无限期强制重新渲染。为了使这项工作有效，我不得不编写一些丑陋的代码来确保我只是使用对象的变异版本来更新状态。这太可怕了。由于我的重新渲染仅以user.uid为条件，是否有一种方法可以“包装” useFirestoreConnect，以便我只传递单数字符串以进行简单比较？

感谢您提供任何见解，还是我处理方法有误？

Answer 1

您应该使用useMemo强制为相同的输入参数返回相同的对象。

const MyComponent = () => {

  const user = useSelector(state => state.firebase.profile)

  const query = useMemo(
    () => ({
      collection: 'account',
      where: [['userId', '==', user.uid ? user.uid : null]],
    }),
    [user]
  )
  useFirestoreConnect(query)
}

React Hooks-防止进行深度比较而导致无限重发

1 个答案: