通过 Hook 反应 setInterval - 无效的钩子调用

Question

I want to perform an action periodically (always after 4 seconds).

I have taken this as example: https://overreacted.io/making-setinterval-declarative-with-react-hooks/

Problem:

Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app

I know that React Hooks can only be used in the main context and not in sub-contexts. And exactly this is my problem here. I want to use a function to create my interval.

Maybe there is a complete different approach.

That's what I have so far, can someone help?

 import React, { useState, useEffect, useRef } from 'react'; import { List } from 'antd'; import axios from 'axios'; import isRequestPerformOk from '../../utils/isRequestPerformOk'; import assertChain from '../../utils/assertChain'; import getConfigs from '../../utils/getConfigs'; const useInterval = (callback, delay) => { const savedCallback = useRef(); // Remember the latest function. useEffect(() => { savedCallback.current = callback; }, [callback]); // Set up the interval. // eslint-disable-next-line useEffect(() => { function tick() { savedCallback.current(); } if (delay !== null) { const id = setInterval(tick, delay); return () => clearInterval(id); } }, [delay]); }; const T3nNews = () => { const [data, setData] = useState({ entries: [] }); const configs = getConfigs(); const updateDataFn = async (uri) => { const res = await axios.get(uri); const entriesList = assertChain(res, 'data.entries') ? res.data.entries : []; setData({ entries: entriesList }); }; const setUpDataFn = (uri) => { useInterval(() => { if (isRequestPerformOk() || true) { updateDataFn(uri); } }, 4000); updateDataFn(uri); }; setUpDataFn(configs.uris.t3nRSS); const createMarkup = description => ({ __html: description }); return ( <List className="t3nNews" itemLayout="horizontal" dataSource={data.entries} renderItem={item => ( <List.Item> <List.Item.Meta className="meta" title={item.title} description={ <p dangerouslySetInnerHTML={createMarkup(item.description)} /> } /> </List.Item> )} /> ); }; export default T3nNews;

Answer 1

You are calling useEffect inside another useEffect when calling useInterval(...) , which is forbidden.

Most likely, this is what you want instead:

const T3nNews = () => {
  const [data, setData] = useState({ entries: [] });
  const configs = getConfigs();

  const updateDataFn = async (uri) => {
    const res = await axios.get(uri);
    const entriesList = assertChain(res, 'data.entries')
      ? res.data.entries
      : [];
    setData({ entries: entriesList });
  };

  useInterval(() => {
    if (isRequestPerformOk() || true) {
      updateDataFn(configs.uris.t3nRSS);
    }
  }, 4000);

  const createMarkup = description => ({ __html: description });
  return (
    <List
      className="t3nNews"
      itemLayout="horizontal"
      dataSource={data.entries}
      renderItem={item => (
        <List.Item>
          <List.Item.Meta
            className="meta"
            title={item.title}
            description={
              <p dangerouslySetInnerHTML={createMarkup(item.description)} />
            }
          />
        </List.Item>
      )}
    />
  );
};

Note: useInterval should be defined outside of the component, to avoid recreating the hook every render (but that's not the issue).

Answer 2

Your hook definition looks fine, but you can't define a custom hook from within a component. If you look at the CodeSandbox from the article, you can see the hook is defined outside.

Just move the useInterval definition outside the T3nNews component and it'll work (and you'll be able to use it in other components!).