[JavaScript知识库]记录本地测试没问题，测试环境有问题的疑点

• modal内关闭当前弹窗，并跳转到新的页面

1、尝试过使用promise.then

const p = function () {
            console.log('=======2');
            return new Promise((resolve, reject) => {
              console.log('=======3');
              handleHistoryModalVisible(false);
              resolve();
            });
          };
          console.log('=======4');
          p().then(() => {
            console.log('=======5');
            history.push({
              pathname: '...',
              query: {
                id: text,
              },
            });
          });

结果测试环境还是页面跳转成功，但是弹窗没有关闭

2、使用settimeout包裹页面跳转事件，并设置延时300毫秒

结果测试环境页面跳转成功，弹窗关闭。但是，跳转后的页面无法点击

3、正确的解决办法！！！！！！！！做好笔记

在modal的afterClose内加上跳转事件

import { message, DatePicker, Select, Modal } from 'antd';
import ProTable from '@ant-design/pro-table';
import { useEffect, useRef, useState, } from 'react';
import { history } from 'umi';
import { isEmpty } from '../../../../utils/common';

const historyModal = (props) => {

  const actionRef = useRef();
  const [jumpLink, handleJumpLink] = useState(undefined);

  useEffect(async () => {
    if (props?.values?.orgCode && props.modalVisible) {
      handleJumpLink(undefined);
      if (actionRef.current) {
        actionRef.current.reload();
      }
    }
  }, [props?.values?.orgCode]);

  const columns = [
    {
      title: '编号',
      dataIndex: 'ode',
      width: 200,
      render: (text, record) => (
        <a
          key="detail"
          onClick={() => {
            handleJumpLink(text)
            props.changeDetailModalVisible(text);
          }}
        >
          {text}
        </a>
      ),
    },
  ];
  return (
    <Modal centered
      forceRender
      maskClosable={false}
      width={1200}
      bodyStyle={{
        padding: 0,
        maxHeight: '600px',
        overflowY: 'auto',
      }}
      destroyOnClose
      title='记录'
      visible={props.modalVisible}
      onCancel={() => {
        handleJumpLink(undefined);
        props.onCancel();
      }}
      footer={null}
      afterClose={() => {
        if (!isEmpty(jumpLink)) {
          history.push({
            pathname: '/detail',
            query: {
              id: jumpLink,
            },
          });
        }
      }}
    >
      <ProTable size="small"
        ...
        columns={columns}
      />
    </Modal>
  );
};

export default historyModal;

?

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖