Javascript api在setInterval内命中两次

我试图在每个设置的时间间隔后命中一个api，但实际情况是api被命中两次/分派被调用两次。 我做得对吗？如果没有，那么还有什么其他方法

看一看

const Agent = (props: RouteComponentProps) => {
  let dispatch = useDispatch();
  const [clicks, setClicks] = useState(0);

  const handleOnAction = () => {
    console.log("user did something", clicks);
    setClicks(clicks + 1);
  };

  const {
    getRemainingTime,
    getLastActiveTime,
    getTotalIdleTime,
  } = useIdleTimer({
    timeout: 10000,
    onIdle: handleOnIdle,
    onActive: handleOnActive,
    onAction: handleOnAction,
    debounce: 500,
  });

  useEffect(() => {
    let timer = setInterval(async () => {
      setClicks((currentClicks) => {
        dispatch(setScore(currentClicks));
        console.log("set clickes twice");
        return 0;
      });
    }, 1000 * 30);

    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <AgentLayout>
      <div className="dashboard-wrapper py-3">
        component
      </div>
    </AgentLayout>
  );
};

export default Agent;

const-Agent=（props:RouteComponentProps）=>{
让dispatch=usedpatch（）；
const[clicks，setClicks]=useState（0）；
常量操作=（）=>{
log（“用户做了什么”，点击）；
设置单击次数（单击次数+1）；
};
常数{
getRemainingTime，
getLastActiveTime，
GetTotaleTime，
}=useIdleTimer({
超时：10000，
onIdle:handleOnIdle，
onActive:handleon主动，
行动：行动，
去盎司：500，
});
useffect（（）=>{
让定时器=设置间隔（异步（）=>{
设置点击次数（（当前点击次数）=>{
调度（设置核心（当前点击次数））；
console.log（“设置单击两次”）；
返回0；
});
}, 1000 * 30);
return（）=>{
清除间隔（计时器）；
};
}, []);
返回(
成分
);
};
出口违约代理；

sendScore

正在调用

setScore

两次。我假设

setScore

正在点击API？是的，setScore正在点击API我已经编辑了我的问题好了，那么你现在不再点击API两次了，对吗？既然你已经删除了做这件事的代码？不，它还在发生