Question

在这个组件中，我使用 postsActions.getPost('1') 触发后加载并将其放入 redux 存储中。 useSelector 捕获它并触发 PostPage 重新渲染，现在带有带有 onClickUse 函数的标题和按钮，该函数使用 post.header 以及它使用的帖子对象：

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;

问题是打字稿在 onClickUse 内部对我大喊 post 可以是 undefined。然后我如何在没有来自 this question 的黑客的情况下同步 React 条件渲染功能和打字稿，例如 !、as 等

Answer 1

您可以内联

data1 = np.where(x2 + y2 > 30, np.NaN, data1)

或者如果你不想在渲染中使用内联函数，你应该创建一个在 props 中没有虚假 <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> 的组件并有条件地渲染它。

Typescript（在处理程序中）对示例中的渲染逻辑一无所知

同步反应条件渲染和打字稿

1 个答案: