React Когда происходит рендеринг

Question

Мой проект использует dvajs(На основе redux и redux-saga). Приведенный ниже код предназначен для отправки запроса после нажатия кнопки, изменения статуса через соединение, а затем вызова компонента дизайна ant message.error ан message.succes(Аналогично предупреждению) напомнить

      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

Решение: звонить за пределы

это просто functionчто вы звоните. Вы должны вызывать его вне раздела JSX вашего кода. Я думаю, что имеет смысл называть это внутри хука с зависимостями от и. Эффект запускается каждый раз, когда это или изменяется. Если status является 1 и submittingэто falsy, то мы называем.

      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 в функциональном компоненте) - это место, где вы создаете разметку JSX (React HTML) для своего компонента на основе текущих значений props и state. Он не должен иметь побочных эффектов. Он создает и возвращает JSX и все.

Вызов - это побочный эффект, поскольку он изменяет глобальный antd messsageобъект. Это означает, что его не должно быть в renderраздел кода. Побочные эффекты обычно устраняются внутри useEffect крючки.

Вы пытаетесь выполнить условный рендеринг, как условный рендеринг компонента. Проблема в том, что это не компонент . Функциональный компонент - это функция, которая возвращает элемент JSX. tip это void функция, которая ничего не возвращает, поэтому вы не можете ее отобразить.