如何解决useState钩子的setState函数的类型? setBlogPost: (value: ...) => void value: null | BLOGPOST | ((prevState: ...) => null | BLOGPOST) prevState: null | BLOGPOST
我正在将我的React项目转换为Typescript。
我有这种状态:
AdminBlogPostContainer.tsx
const [blogPost,setBlogPost] = useState<null | BLOGPOST>(null);
return(
<AdminBlogPostPage
blogPost={blogPost as BLOGPOST}
setBlogPost={setBlogPost}
/>
);
AdminBlogPostPage.tsx
interface AdminBlogPostPage {
blogPost: BLOGPOST,setBlogPost: // <---- WHAT SHOULD I USE AS TYPE HERE ?
}
const AdminBlogPostPage: React.FC<AdminBlogPostPage> = (props) => {
console.log("Rendering AdminBlogPostPage...");
return(
// ...
);
};
export default AdminBlogPostPage;
这是错误消息:
解决方法
让我们从@types/react
开始一些相关的类型定义。
declare namespace React {
// ...
type SetStateAction<S> = S | ((prevState: S) => S);
// ...
type Dispatch<A> = (value: A) => void;
// ...
function useState<S>(initialState: S | (() => S)): [S,Dispatch<SetStateAction<S>>];
// ...
}
由此我们可以推断出语句中setBlogPost
的类型
const [blogPost,setBlogPost] = useState<null | BLOGPOST>(null);
这是Dispatch<SetStateAction<null | BLOGPOST>>
,但让我们细分一下以了解每个部分的含义。
setBlogPost: (value: null | BLOGPOST | ((prevState: null | BLOGPOST) => null | BLOGPOST)) => void;
从外面一次消化一次,我们得到以下解释:
-
setBlogPost: (value: ...) => void
setBlogPost
是一个接受参数value
并返回void
的函数。-
value: null | BLOGPOST | ((prevState: ...) => null | BLOGPOST)
value
是null
,BLOGPOST
或接受参数prevState
并返回null
或BLOGPOST
的函数。-
prevState: null | BLOGPOST
prevState
是null
或BLOGPOST
。
-
-
interface AdminBlogPostPage {
blogPost: BLOGPOST;
setBlogPost: Function; // <---- You may use the Function type here
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。