Nhập hàm setState của hook useState?

Question

Tôi đang chuyển đổi dự án React của mình thành Typescript.

Tôi có phần trạng thái này:

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;

Đây là thông báo lỗi:

Answer 1

Hãy bắt đầu với một số định nghĩa loại có liên quan từ @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>>];
    // ...
}

Từ điều này, chúng ta đã có thể suy ra loại setBlogPosttrong câu lệnh

const [blogPost, setBlogPost] = useState<null | BLOGPOST>(null);

đó là Dispatch<SetStateAction<null | BLOGPOST>>, nhưng hãy chia nhỏ điều đó để xem ý nghĩa của từng phần.

setBlogPost: (value: null | BLOGPOST | ((prevState: null | BLOGPOST) => null | BLOGPOST)) => void;

Giải thích từng phần một khi làm việc từ bên ngoài vào trong, chúng tôi nhận được lời giải thích sau:

• setBlogPost: (value: ...) => void

  setBlogPostlà một hàm chấp nhận một tham số valuevà trả về void.

  • value: null | BLOGPOST | ((prevState: ...) => null | BLOGPOST)

    valuelà null, a BLOGPOST, hoặc một hàm chấp nhận một tham số prevStatevà trả về nullhoặc a BLOGPOST.

    • prevState: null | BLOGPOST

      prevStatelà một trong hai nullhoặc a BLOGPOST.