Как отключить ESLint от добавления элементов в массив наблюдателей useEffect? - PullRequest
Новая
       51

Как отключить ESLint от добавления элементов в массив наблюдателей useEffect?

0 голосов
/ 30 марта 2020

Я использую Firebase FireStore в реальном времени с React и поместил мой слушатель в useEffect.

Вот код 

useEffect(() => {
    const unsub = db.collection('messages')
    .onSnapshot((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            // Check if it's existing in messages
            const index = messages.findIndex(i => i.id === doc.id)

            if (index === -1) {
                const newMessage = {
                    id: doc.id,
                    ...doc.data()
                }
                setMessages([newMessage, ...messages])
            }
        });
    });

    return () => unsub()
}, [])

Каждый раз, когда я пытаюсь сохранить файл, он добавляет состояние messages внутри массива useEffect 

useEffect(() => {
    // code
}, [messages])

Это раздражает, и из-за этого он продолжает перезапускать слушатель и заставляет меня получать дублирующиеся данные, et c.

Я пытался найти, каково это правило ESLint, и, похоже, не могу его найти.

1 Ответ

1 голос
/ 30 марта 2020

Проблема с messages. Я думаю, что это переменная из useSate. Линтер предлагает добавлять сообщения в массив зависимостей. Может помочь код MB ниже. 

import React, { useEffect, useState } form 'react';

const Component = () => {
  const [messages, setMessages] = useState([]);
  
  useEffect(() => {
    const unsub = db.collection('messages')
      .onSnapshot((querySnapshot) => {
        querySnapshot.forEach((doc) => {
          setMessages((prevMessages) => {
            const index = prevMessages.findIndex(({ id }) => id === doc.id);
            if (index !== -1) {
              return prevMessages;
            }
            
            return ([
              { id: doc.id, ...doc.data() },
              ...prevMessages,
            ]);
          });
        });
      });

    return unsub;
  }, []);
  
  return null;
};
...