Question

在下面的示例中，我想知道如何摆脱items中的useEffect()依赖关系，而我只想执行一次以设置间隔。最佳做法是什么？谢谢！

const Component = () => {
  const [items, setItems] = useState([])

  useEffect(() => {
    const fetchItems = () => {
      fetchNewItemsSince(items.length ? items[items.length - 1].id : 0) // How to get rid of items dependency
        .then((newItems) => {
          setItems((oldItems) => [...oldItems, ...newItems])
        })
    }

    fetchItems()
    setInterval(fetchItems, 60 * 10000)

    return () => clearInterval()
  }, [items]) // <= I want to get rid of that dependency!!
}

Answer 1

此代码段中几乎没有错误，例如清理间隔和在Sub testPasswordRemoval() Dim wb As Workbook Set wb = Workbooks.Open(Filename:="C:\Temp\Book2.xlsm", Password:="pw") wb.Password = "" wb.SaveAs "C:\Temp\NewBook.xlsm" End Sub中调用清理函数，我将把此逻辑重写为：

useEffect

Answer 2

我会使用useInterval hook from the react-use library做这样的事情：

const Component = () => {
  const [items, setItems] = useState([]);
  const lastItemId = useMemo(
    () => (items.length ? items[items.length - 1].id : 0),
    [items],
  );
  const fetchNewItems = useCallback(async () => {
    const newItems = await fetchNewItemsSince(lastItemId);
    if(newItems.length) {
      setItems((oldItems) => [...oldItems, ...newItems]);
    }
  }, [lastItemId, setItems]);
  useInterval(fetchNewItems, 60 * 10000);
};

React Hooks：如何摆脱状态依赖

2 个答案: