我正在将我的 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;
从外到内一次消化这一块,我们得到以下解释:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)