React提交信息到服务器获响应后如何实现页面刷新？

你需要把原函数里的模拟延迟逻辑替换成实际的服务器请求，请求成功获取响应后再执行页面刷新，同时做好错误处理避免按钮一直处于加载状态。以下是改造后的代码示例：

const handleSubmit = async event => {
  event.preventDefault();
  setSubmitting(true);

  try {
    // 替换成你的实际请求地址和请求参数
    const response = await fetch('/your-submit-api-url', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        // 这里放你要提交的表单数据，比如从组件状态中读取
        // username: formData.username,
        // content: formData.content
      })
    });

    // 验证响应状态，确保请求成功
    if (!response.ok) {
      throw new Error('服务器请求失败');
    }

    // 解析服务器响应（如果需要处理响应数据的话）
    const responseData = await response.json();
    console.log('服务器返回数据:', responseData);

    // 请求成功后刷新页面
    window.location.reload();
  } catch (error) {
    console.error('提交出错:', error);
    // 出错时重置加载状态，避免按钮卡死
    setSubmitting(false);
  }
};

关键注意点： #

• 用async/await处理异步请求，比回调写法更清晰易读
• 替换/your-submit-api-url为你实际的服务器接口地址
• 根据表单结构修改请求体参数，可直接从组件状态中读取表单数据（比如formData.username）
• window.location.reload()触发页面硬刷新，若需无刷新更新内容，可改为直接更新本地状态
• 必须保留错误处理逻辑，避免请求失败时提交按钮一直处于加载状态

内容的提问来源于stack exchange，提问作者MR. potato35