reactjs - useState 钩子的 setState 函数的类型?
问题描述
我正在将我的 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
、 a或接受参数并返回或 aBLOGPOST
的函数。prevState
null
BLOGPOST
prevState: null | BLOGPOST
prevState
要么null
要么BLOGPOST
。
推荐阅读
- kubernetes - k8s上的locust主从,测试完成后删除所有pod
- encryption - 为什么3DES的中间块是解密而不是加密?
- java - 在 RMI 对等文件共享客户端-服务器系统中实施 RSA 加密/解密
- flutter - 如何将变量的文本带入 TextField Flutter
- php - 如何使用迭代的 MySQL 查询并形成 json 编码的结果?
- ios - 如何在 API 调用完成之后(而不是之前)在表格视图中插入单元格?
- symfony - Symfony Swfitmailer SES 错误在 25 分钟内第二封电子邮件
- ios - SwiftUI:点击列表(自定义行视图)中的按钮后如何发出网络请求?
- r - 在 R 中生成综合报告格式
- excel - Excel 两次显示名称