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 包装？