Question

我有一个显示项目列表的功能组件。这些项目是通过Ajax获取的。我正在将 React 与状态管理库 Easy Peasy 一起使用。

const MyList = () => {

  const {fetchItems} = useStoreActions(actions => actions.myStore);
  const {items} = useStoreState(state => state.myStore);

  React.useEffect(() => {
    fetchItems(); // Ok, fine, it works well here, done once.
  }, []);

  return (
    <ul>
      Here are my Items
    </ul>
  )
}

这一次可以正确加载我的物品。但我想反复重新加载它们。所以我找到了一个自定义钩子：

function useInterval(callback, delay) {
  const savedCallback = useRef();

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

但是当我这样做的时候，

const MyList = () => {

  const {fetchItems} = useStoreActions(actions => actions.myStore);
  const {items} = useStoreState(state => state.myStore);

  React.useEffect(() => {
    fetchItems(); // Ok, fine, it works well here, done once.
  }, []);

  useInterval(() => {
    fetchItems();
  }, 2000);

  return (
    <ul>
      Here are my Items
    </ul>
  )
}

我收到以下错误：

  RangeError: Maximum call stack size exceeded
    at Array.reduce (<anonymous>)
    at get (easy-peasy.esm.js:203)
    at Object.get$1 [as whats] (easy-peasy.esm.js:471)
    at eval (moderation.js:22)
    at Array.map (<anonymous>)
    at eval (moderation.js:21)
    at memoizerific (memoizerific.js:170)
    at Object.get$1 [as whats] (easy-peasy.esm.js:476)
    at eval (moderation.js:22)
    at Array.map (<anonymous>)

如何反复重新加载我的物品？

如何使用React和Easy Peasy反复调用动作

0 个答案: