使用反应成帧器类型'()=> void'的打字稿错误不可分配给类型'未定义'

Posted

技术标签:

【中文标题】使用反应成帧器类型\'()=> void\'的打字稿错误不可分配给类型\'未定义\'【英文标题】:Error in typescript using react framer Type '() => void' is not assignable to type 'undefined'使用反应成帧器类型'()=> void'的打字稿错误不可分配给类型'未定义' 【发布时间】:2021-08-03 08:32:10 【问题描述】:

我正在使用 typescript、react 和 framer-motion。 我创建了一个 Counter 组件,其数量动态增加。 但是,我遇到了一些 ts 错误。

类型 '() => void' 不可分配给类型 'undefined'.ts(2322) 错误发生在①处。

错误无法调用可能是“未定义”的对象。ts(2722) 发生在位置②。

export const Index: React.FunctionComponent = () => 
  return (
   <Counter valueTo=30 totalDuration=2 + 0.5 />%
  );
;

import  useEffect, useRef, useState  from 'react';

interface Props 
  valueFrom: number;
  valueTo: number;
  totalDuration: number;


export const Counter: React.FunctionComponent<Props> = ( valueFrom = 0, valueTo = 100, totalDuration = 1 ) => 
  const [count, setCount] = useState(valueFrom);

  useInterval(() => 
    if (count < valueTo) 
      setCount(count + 1);
    
  , (totalDuration / valueTo) * 1000);

  return count;
;

const useInterval = (callback: () => void, delay: number) => 
  const savedCallback = useRef();

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

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

【问题讨论】:

这能回答你的问题吗? How to use refs in React with Typescript 【参考方案1】:

您需要将 ref 声明为具有该类型(useRef 使用泛型)并确保该函数未定义(默认情况下,useRef 具有“当前”未定义)。您可以通过以下方式做到这一点:(查看您的标记点)

const useInterval = (callback: () => void, delay: number) => 
  const savedCallback = useRef<()=>void>();

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

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

【讨论】:

以上是关于使用反应成帧器类型'()=> void'的打字稿错误不可分配给类型'未定义'的主要内容,如果未能解决你的问题,请参考以下文章

如何修复汉堡菜单动画?

为啥分帧器可以跨域工作,可以有条件地使用分帧器吗?

如何为 Network.framework 编写 NWProtocolFramer,使用分隔符将流拆分为帧?

反应堆映射 Mono<Boolean> 到 Mono<Void>

在 React 中导入 Framer Motion v5 时出错(使用 create-react-app)

802.11成帧细节