React表单提交时显示加载Spinner的异常问题求助

问题原因 #

页面一加载就显示Spinner的核心原因是组件挂载时执行了空依赖的useEffect，这个useEffect会在页面加载完成后立刻将loading设为true，导致Spinner直接显示。而你需要的是点击提交按钮后才触发加载状态。

修复步骤 #

1. 移除页面加载时自动触发的useEffect块
2. 将加载逻辑移到表单提交函数handleSubmit中，点击提交后才设置loading为true
3. 用<form>标签包裹输入项和提交按钮，使用form的onSubmit事件代替按钮的onClick，更符合表单规范
4. 优化状态更新写法，让代码更直观清晰

修改后的Main组件代码 #

import React from "react";
import { LineWave } from "react-loader-spinner";
import { useState } from "react";
import Table from "./Table";

function Main() {
  const [tableData, setTableData] = useState([]);
  const [formInputData, setformInputData] = useState({
    Name: '',
    email: '',
  });
  const [loading, setloading] = useState(false);

  const handleChange = (evnt) => {
    setformInputData(prev => ({
      ...prev,
      [evnt.target.name]: evnt.target.value
    }));
  };

  const handleSubmit = (evnt) => {
    evnt.preventDefault();
    const checkEmptyInput = !Object.values(formInputData).every(res => res === "");
    
    if (checkEmptyInput) {
      // 点击提交后开启加载状态
      setloading(true);
      
      // 模拟异步加载过程（实际项目中可替换为API请求）
      setTimeout(() => {
        // 更新表格数据
        setTableData(prev => [...prev, formInputData]);
        // 清空表单输入
        setformInputData({ Name: '', email: '' });
        // 加载完成后关闭加载状态
        setloading(false);
      }, 4000);
    }
  };

  return (
    <div className="container">
      <div className="row">
        <div className="col-sm-8">
          {/* 用form包裹表单元素，绑定提交事件 */}
          <form onSubmit={handleSubmit}>
            <div className="col">
              <input 
                type="text" 
                onChange={handleChange} 
                value={formInputData.Name} 
                name="Name" 
                className="form-control" 
                placeholder="Name" 
              />
            </div>
            <div className="col">
              <input 
                type="email" 
                onChange={handleChange} 
                value={formInputData.email} 
                name="email" 
                className="form-control" 
                placeholder="Email Address" 
              />
            </div>
            <div className="col">
              <input type="submit" id="submit" className="btn btn-primary" />
              {loading ? (
                <LineWave color={'#062DF6'} loading={loading} size={50} />
              ) : (
                <Table tableData={tableData} />
              )}
            </div>
          </form>
          <div className="app"></div>
        </div>
      </div>
    </div>
  );
}

export default Main;

说明 #

• 移除了原代码中自动触发的useEffect，避免页面加载就显示Spinner
• 点击提交按钮后，先验证输入不为空，再开启加载状态
• 用setTimeout模拟异步操作（实际项目中可替换为后端API请求），完成后更新表格数据并关闭加载状态
• 使用form的onSubmit事件代替按钮的onClick，符合HTML表单标准用法，evnt.preventDefault()能正确阻止表单默认提交行为

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