React 渲染何时发生

Question

我的项目使用dvajs（基于redux和redux-saga），下面的代码是点击按钮后发送请求，通过connect改变状态，然后调用ant design组件message.error一个@ 987654323@(类似alert)提醒

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);

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

警告：渲染方法应该是 props 和 state 的纯函数； 不允许从渲染触发嵌套组件更新。如果 必要时，在 componentDidUpdate 中触发嵌套更新。

当状态改变时组件不会重新渲染吗？提示函数会改变状态吗？

Answer 1

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

tip 只是您正在调用的function。您应该在代码的 return JSX 部分之外调用它。我认为在依赖status 和submitting 的useEffect 挂钩中调用它是最有意义的。每次status 或submitting 更改时，效果都会运行。如果status 是1 而submitting 是falsy，那么我们调用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>
    )
}

说明

渲染方法应该是 props 和 state 的纯函数

组件的渲染部分（类组件中的render() 或函数组件中的return）是您根据props 和@ 的当前值为组件创建JSX（React HTML）标记的地方987654340@。它不应该有任何副作用。它创建并返回 JSX，仅此而已。

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

您正在尝试有条件地渲染tip，就像您有条件地渲染组件一样。问题是tip 不是组件。函数组件是返回 JSX 元素的函数。 tip 是一个 void 函数，它什么都不返回，所以你不能渲染它。