React Hooks - Предотвратите глубокое сравнение, вызывающее бесконечные рендеры - PullRequest
Новая
       6

React Hooks - Предотвратите глубокое сравнение, вызывающее бесконечные рендеры

0 голосов
/ 22 июня 2019

Я использую реагирующий крюк следующим образом.

Я жду, пока пользовательский объект будет загружен через ловушку response-redux useSelector, а затем обновлю запрос firebase, используемый ловушкой useFirestoreConnect. 

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 таким образом, чтобы я мог передать только единственную строку для простого сравнения?

Спасибо за понимание или я ошибочно подхожу к этому?

1 Ответ

0 голосов
/ 22 июня 2019

Вы должны использовать 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)
}
...