同步反应条件渲染和 typescript

Question

In this component I trigger post loading using postsActions.getPost('1') and put it into the redux store. useSelector catches it and triggers PostPage rerender, now with header and button with onClickUse function attached that uses post.header along with the post object that it uses:

import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { postsActions } from '../../store/Posts';

import styles from './PostPage.module.scss';

const PostPage = () => {
  const dispatch = useDispatch();
  const post = useSelector((state) => state.post);

  const onClickUse = () => {
    console.log(`See? I am used only when post is rendered`);
    console.log(`So it's fine if I use it here: ${post.header}`);
  }

  useEffect(() => {
    dispatch(postsActions.getPost('1'));
  }, []);

  return (
    <div className={styles.container}>
      {
        post &&
        <div>
          <h1>{post.header}</h1>
          <button onClick={onClickUse}>Click me</button>
        </div>
      }
    </div>
  );
};

export default PostPage;

The problem is that typescript yells inside onClickUse at me that post can be undefined . How do I then synchronize React conditional rendering functionality and typescript without hacks from this question , like ! , as etc.

Answer 1

You can inline

<div className={styles.container}>
      {
        post &&
        <div>
          <h1>{post.header}</h1>
          <button onClick={() => {
               console.log(`See? I am used only when post is rendered`);
               console.log(`So it's fine if I use it here: ${post.header}`);
          }}>Click me</button>
        </div>
      }
    </div> 

or if you don't want inline functions in render, you should create a component with not falsy post in props and conditionally render it.

Typescript (in handler) knows nothing about render logic in your example