时间戳

首页 > 解决方案 > 反应钩子：回调作为道具重新渲染每个钩子，这取决于它何时被调用

javascript - 反应钩子：回调作为道具重新渲染每个钩子，这取决于它何时被调用

问题描述

onError在下面的示例中，当我调用prop in时，我进入了一个循环fetchItems()。我不明白为什么，当被调用时，它会根据它触发钩子。我怎样才能解决这个问题？谢谢！

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]);
};

标签： javascriptreactjsreact-hooks

解决方案

正如我在评论中所说，onError正在触发父级的重新渲染，因此子级也将再次渲染。

有人建议onError从useCallback依赖数组中删除。尽管它可能有效，但它被认为是一种不好的做法，因为它可能导致内存泄漏。您是否尝试过移除useCallback函数的环绕？

推荐阅读