Javascript 通过钩子响应setInterval-钩子调用无效

我希望定期执行操作（始终在4秒之后）

我以此为例:

问题:

未捕获不变冲突：钩子调用无效。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一： 1.React和渲染器的版本可能不匹配（例如React DOM） 2.你可能违反了钩子的规则 3.同一应用程序中可能有多个React副本

我知道React钩子只能在主上下文中使用，不能在子上下文中使用。这正是我的问题所在。我想使用一个函数来创建我的间隔

也许有一种完全不同的方法

这就是我目前的情况，有人能帮忙吗

import React，{useState，useffect，useRef}来自'React'；
从“antd”导入{List}；
从“axios”导入axios；
从“../../utils/IsRequestPerformMok”导入IsRequestPerformMok；
从“../../utils/assertChain”导入assertChain；
从“../../utils/getConfigs”导入getConfigs；
const useInterval=（回调，延迟）=>{
const savedCallback=useRef（）；
//记住最新的功能。
useffect（（）=>{
savedCallback.current=回调；
}，[callback]）；
//设置间歇时间。
//eslint禁用下一行
useffect（（）=>{
函数tick（）{
savedCallback.current（）；
}
如果（延迟！==null）{
const id=设置间隔（滴答、延迟）；
return（）=>clearInterval（id）；
}
}，[延迟]；
};
常数T3nNews=（）=>{
const[data，setData]=useState（{entries:[]}）；
const configs=getConfigs（）；
const updateDataFn=async（uri）=>{
const res=等待axios.get（uri）；
常量entriesList=assertChain（res，'data.entries'）
？res.data.entries
: [];
setData（{entries:entriesList}）；
};
常量setUpDataFn=（uri）=>{
useInterval（（）=>{
如果（IsRequestPerformMok（）| | true）{
更新的TAFN（uri）；
}
}, 4000);
更新的TAFN（uri）；
};
setUpDataFn（configs.uri.t3nRSS）；
const createMarkup=description=>（{{uuuu html:description}）；
返回(
(
)}
/>
);
};
导出默认的T3nNews钩子定义看起来不错，但不能从组件中定义自定义钩子。如果您查看文章中的链接，您可以看到钩子是在外部定义的

只要将
useInterval
定义移到
T3nNews
组件之外，它就会工作（并且您可以在其他组件中使用它！）。
调用
useInterval（…）
时，您正在另一个
内部调用
useEffect
，这是禁止的

最有可能的情况是，这正是您想要的：

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>
      )}
    />
  );
};

const T3nNews=（）=>{
const[data，setData]=useState（{entries:[]}）；
const configs=getConfigs（）；
const updateDataFn=async（uri）=>{
const res=等待axios.get（uri）；
常量entriesList=assertChain（res，'data.entries'）
？res.data.entries
: [];
setData（{entries:entriesList}）；
};
useInterval（（）=>{
如果（IsRequestPerformMok（）| | true）{
更新的TAFN（configs.uris.t3nRSS）；
}
}, 4000);
const createMarkup=description=>（{{uuuu html:description}）；
返回(
(
)}
/>
);
};

注意：
useInterval
应该在组件之外定义，以避免每次渲染时都重新创建挂钩（但这不是问题所在）。
Hi@Matthieu Libeer，我现在这么做了，但给出了相同的错误。我在第一篇文章中编辑了代码。您可以再看一下吗？您是否注意到我删除了对
useffect
的调用，现在只调用
useInterval
？我将以任何一种方式需要该useffect，因为我以后还需要处理组件willunmount（）等效项..您可以在
useInterval
旁边使用另一个useffect，但是，您不能在
useffect
中使用
useInterval
。这就是你的问题的根源。那么，如何解决我的问题呢？如果组件已经挂载，我想启动setInterval，因此我需要将其投入使用。不知道怎么用react hooks解决这个问题。。我如何才能在不将useInterval放入useEffect的情况下运行呢？嗨，vinsanity555，我现在这样做了，但给了我同样的错误。我在第一篇文章中编辑了代码。你可以再看看吗？