使用useEffect

Question

我有一个需要每3秒运行一次API调用的应用程序。我每3秒钟收到一次API结果，就用useInterval来调用API。当我从redux更新时，useInterval出了点问题。

UseInterval

export default function useInterval(callback, delay, immediate = true) {
  const savedCallback = useRef();

  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  useEffect(() => {
    (async() => {
      async function tick() {
        await savedCallback.current();
      }
      if (delay !== null) {
        if (immediate) {
          await tick();
        }
        let id = setInterval(tick, delay);
        return () => clearInterval(id);
      }
    })(); 
  }, [delay]);
}

主要

const enhance = connect(
  (state, ownProps) => ({
    modal: state.modal[ownProps.id]
  }),
  { updateFromRedux }
);
const container = ({ id, modal, updateFromRedux }) => {
    useInterval(() => {
        # -----> This scope of codes went wrong when updateFromRedux is called <-----
        let modalId = modal["id"]
        return fetch(`https://api-url.com/${modalId}`)
            .then(res => res.json())
            .then(
                (result) => {
                    updateFromRedux(id, result)
                }
            )
    }, 3000)
})
export default enhance(container);

Redux

export const updateFromRedux = (id, details) => ({
  type: UPDATE_DETAILS,
  payload: { id, details }
});

问题

在调用updateFromRedux redux方法之后，modalId会产生不一致的输出，例如useInterval内部未定义。