什么时候进行渲染？

Question

我的项目使用dvajs(基于redux和redux-saga)，下面的代码是在单击按钮后发送请求，通过连接更改状态，然后调用ant design组件message.error amessage.success(类似于警告)来提醒您。

import type { Dispatch } from 'umi';
import ProForm, { ProFormText } from '@ant-design/pro-form';
import { message } from 'antd';

const tip = (type: string, content: string) => {
  if (type === 'error') message.error(content, 5);
  else message.success(content, 5);
};

const RegisterFC: React.FC<RegisterProps> = (props) => {
  const { registerResponseInfo = {}, submitting, dispatch } = props;
  const { status } = registerResponseInfo;

  const handleSubmit = (values: RegisterParamsType) => {
    dispatch({
      type: 'register/register',
      payload: { ...values },
   });
};      

  return (
    <div>
      <ProForm
         onFinish={(values) => {
            handleSubmit(values as RegisterParamsType);
            return Promise.resolve();
    }}
       >
       <ProFormText/>
       ...
      {
        status === '1' && !submitting && (
          tip('error',
            intl.formatMessage({
              id: 'pages.register.status1.message',
              defaultMessage: 'error'
            })
          )
        )
      }
    <<ProForm>/>
    </div>
  )
}

const p = ({ register, loading }: { register: RegisterResponseInfo, loading: Loading; }) => {
  console.log(loading);
  return {
    registerResponseInfo: register,
    submitting: loading.effects['register/register'],
  };
};

export default connect(p)(RegisterFC);

当我单击该按钮时，控制台提示：

警告:呈现方法应该是道具和状态的纯函数；不允许从呈现触发嵌套组件更新。如果有必要，在componentDidUpdate中触发嵌套更新。

当状态发生变化时，组件不是重新呈现吗？提示函数会改变状态吗？

Answer 1

解决方案:在tip之外调用return

tip只是您正在调用的一个function。您应该在代码的return JSX部分之外调用它。我认为最有意义的做法是在useEffect钩子中调用它，并依赖于status和submitting。每次status或submitting更改时，效果都会运行。如果status是1，submitting是虚妄，那么我们称之为tip。

const RegisterFC: React.FC<RegisterProps> = (props) => {
    const { registerResponseInfo = {}, submitting, dispatch } = props;
    const { status } = registerResponseInfo;

    const handleSubmit = (values: RegisterParamsType) => {
        dispatch({
            type: 'register/register',
            payload: { ...values },
        });
    };

    React.useEffect(() => {
        if (status === '1' && !submitting) {
            tip('error',
                intl.formatMessage({
                    id: 'pages.register.status1.message',
                    defaultMessage: 'error'
                })
            );
        }
    }, [status, submitting]);

    return (
        <div>...</div>
    )
}

解释

呈现方法应该是道具和状态的纯函数。

组件的呈现部分(类组件中的render()或函数组件中的return )是根据props和state的当前值为组件创建JSX (React )标记的部分。它不应该有任何副作用。它创建并返回JSX，仅此而已。

调用tip是一个副作用，因为它修改了全局antd messsage对象。这意味着它不应该出现在代码的render部分。副作用通常在useEffect钩子内部处理。

您正在尝试有条件地呈现tip，就像有条件地呈现组件一样。问题是tip是，而不是组件。函数组件是返回JSX元素的函数。tip是一个不返回任何内容的void函数，因此不能呈现它。