React hooks：回調作為 prop 在調用時根據它重新渲染每個鈎子

Question

在下面的示例中，當我在fetchItems()中調用onError道具時，我陷入了循環。 我不明白為什么在調用時會根據它觸發掛鈎。 我怎樣才能解決這個問題？ 謝謝！

const Component = ({onError}) => {
  const [items, setItems] = useState([]);
  const itemsRef = useRef(items);

  const fetchItems = useCallback(() => {
    const [first] = itemsRef.current;
    fetchNewItemsSince(first || 0).then((newItems) => {
      setItems((oldItems) => [...oldItems, ...newItems]);
    }).catch(onError);
  }, [onError]);

  // Update ref to dispose closure on `items` state
  useEffect(() => {
    itemsRef.current = items;
  }, [items]);

  // Call once on mount
  useEffect(() => {
    fetchItems();
  }, [fetchItems]);

  // Make an interval
  useEffect(() => {
    const id = setInterval(fetchItems, ONE_MINUTE);

    return () => {
      clearInterval(id);
    };
  }, [fetchItems]);
};

Answer 1

嘗試使用 function 設置初始 state

Const [foo, setFoo] = useState(() => 'foo')

您針對該 state 實例的 useCallback 可能會運行一次，如果我錯了請糾正我，因此如果您為 useState 設置 function 它只會運行一次，請考慮是否安裝了一個組件但沒有更新。

也許這是慣例，但我從來沒有在不設置錯誤 state 的情況下調用 [onError] 之類的東西，因為我認為這是識別它的方式。

所以 React 是渲染某些組件等的好東西。UseEffect 很棒，我個人不使用它來更改 state，對我來說通常是在 JSX 中完成的。

我想要一個帶有 UseState 方法的 onClick 處理程序，並觀察那里的變化。 相反，您運行 function 運行 setState 事件並監視事件。

如果您需要任何解釋，請告訴我這是否有效。

Answer 2

正如我在評論中所說， onError正在觸發對父級的重新渲染，因此子級也將再次渲染。

有人建議從依賴項的useCallback數組中刪除onError 。 雖然它可能有效，但它被認為是一種不好的做法，因為它會導致內存泄漏。 您是否嘗試過刪除useCallback周圍的 useCallback 包裝？