你遇到的问题很典型：直接调用window.location.reload(true)会立刻触发页面刷新，Ant Design的通知组件还没完成渲染就被刷新掉了，所以看不到通知。下面是具体的解决方案，兼顾通知展示和刷新逻辑：

核心思路 #

用setTimeout延迟执行页面刷新，给通知足够的展示时间；同时可以优化体验，允许用户关闭通知时取消自动刷新，或者点击通知直接刷新。

修改后的代码示例 #

import React from 'react';
import { Form, Input, Button, notification } from 'antd';
import axios from 'axios';

class CustomForm extends React.Component {
  handleFormSubmit = (event, requestType, articleId) => {
    // 必须阻止表单默认提交行为，避免浏览器自动刷新
    event.preventDefault();
    
    const title = event.target.elements.title.value;
    const content = event.target.elements.content.value;

    // 设置5秒后自动刷新的定时器，保存ID方便后续取消
    const reloadTimer = setTimeout(() => {
      window.location.reload(true);
    }, 5000);

    notification.open({
      message: 'Success',
      description: 'Your Response is submitted',
      onClick: () => {
        console.log('Notification Clicked!');
        // 点击通知时，取消定时器并立即刷新页面
        clearTimeout(reloadTimer);
        window.location.reload(true);
      },
      onClose: () => {
        // 用户手动关闭通知时，取消自动刷新
        clearTimeout(reloadTimer);
      },
      onCancel: () => {
        clearTimeout(reloadTimer);
      }
    });

    switch (requestType) {
      case 'post':
        return axios.post('http://localhost:8000/api/', { title, content })
          .then(res => console.log(res))
          .catch(err => console.error(err))
      case 'put':
        return axios.put(`http://localhost:8000/api/${articleId}/`, { title, content })
          .then(res => console.log(res))
          .catch(err => console.error(err))
    }
  }

  render(){
    return (
      <div>
        {/* 建议用onSubmit替代onSubmitCapture，更符合表单提交逻辑 */}
        <Form onSubmit={(event) => this.handleFormSubmit(event, this.props.requestType, this.props.articleId)} >
          <Form.Item label="Title">
            <Input name='title' placeholder="Input some title" />
          </Form.Item>
          <Form.Item label="Content">
            <Input name='content' placeholder="Input some content" />
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType='submit' >{this.props.btntext}</Button>
          </Form.Item>
        </Form>
      </div>
    )
  }
};

export default CustomForm;

关键修改点说明 #

1. 阻止表单默认行为：添加event.preventDefault()，避免浏览器默认的表单提交刷新页面，确保我们的自定义逻辑能完整执行。
2. 延迟刷新定时器：用setTimeout设置5秒后刷新页面，让通知有足够时间展示。
3. 优化用户体验：
   • 用户关闭通知时，通过onClose/onCancel回调清除定时器，避免不必要的页面刷新。
   • 用户点击通知时，可以立即触发刷新（可选逻辑，你也可以移除这部分保持只延迟刷新）。

这样修改后，通知会正常显示5秒，之后自动刷新页面；如果用户提前关闭通知，也不会再触发刷新，体验更友好。

内容的提问来源于stack exchange，提问作者user13769010