javascript - 如何禁止 ESLint 将项目添加到 useEffect 的观察者数组中？

Question

我将 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()
}, [])

每次我尝试保存文件时，它都会在 useEffect 数组中添加 messages 状态

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

这变得很烦人，由于这种行为，它不断重新启动监听器并导致我获取重复的数据等。

我尝试搜索 ESLint 规则，但似乎找不到。

Answer 1

消息的问题。我认为它是来自 useSate 的变量。 Linter 建议将消息​​添加到依赖项数组中。下面的 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;
};