useEffect 依赖异常

Question

我一直在检查我的 React/Redux 应用程序并修复 linting 问题，但我一直在努力处理 useEffect/useCallback 依赖项。

我已经阅读了这个 guide 和其他多个来源，所有这些都强调了尊重 react-hooks/exhaustive-deps 并确保依赖项始终包含在数组中的重要性.但是，我遇到了多种情况，我不知道如何正确包含所有依赖项而不会触发不必要的副作用。

这是主要的例子：

我正在构建一个聊天界面，ChatScroller 组件向用户显示当前的聊天消息列表。数据获取逻辑如下所示：

const { chatID } = props;
const [chatMessages, setChatMessages] = useState([]);

const loadMessages = useCallback(() => {
   const oldestMessage = chatMessages.length > 0 ? chatMessages[0].timestamp : undefined;

   //Call api and tell it to get the 10 most recent chat messages for `chatID`, whose timestamp is before oldestMessage
}, [chatID]);

useEffect(() => {
   loadMessages();
}, [loadMessages]);

正在发生的事情是loadMessages 函数依赖于现有的聊天消息列表，以便告诉 api 在聊天历史记录中的何处分页。但是，如果我包含 chatMessages 在依赖数组中（甚至只包含最旧消息的时间戳），然后loadMessages 将在它被调用后立即重新加载，从而导致 useEffect 再次触发。

我正在构建的 PostList 组件也遇到了类似的问题，该组件有类似的要求来告诉 api 在哪里分页。我遇到的一般模式是一个函数需要一些外部数据来完成它的工作，但是，如果数据最终发生变化，我不一定需要该函数重新同步。我在许多不同的组件中都遇到了这个问题，这让我们想知道我是否认为 useEffect 错误，或者 exhaustive-deps 的异常是否比我预期的更常见。

Answer 1

您可以使用额外的状态变量来决定何时进行下一次 API 调用。如下所示。

    const { chatID } = props;
    const [chatMessages, setChatMessages] = useState([]);
    const [nextApiCall, setNextApiCall] = useState(false); // set to true based on the logic(scroll or whatever logic...)
    
    useEffect(() => {
      const loadMessages = () => {
        const oldestMessage =
          chatMessages.length > 0 ? chatMessages[0].timestamp : undefined;
    
        // Call api and tell it to get the 10 most recent chat messages for `chatID`, whose timestamp is before oldestMessage
        // setNextApiCall(false);
      };
    
      if (nextApiCall) {
        loadMessages();
      }
    }, [chatMessages, nextApiCall]);