使用反应成帧器类型'()=> 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>