React编辑模态框表单的状态管理及提交功能问题

你的实现逻辑存在关键问题：useState(preGameTrade) 仅会在组件首次渲染时，将 preGameTrade 作为初始值赋值给 preGame 状态。当切换菜单选择新对象时，传入的 preGameTrade 虽然已经更新，但 useState 不会自动同步这个变化——因为它的初始值参数只在组件挂载时生效一次。

而表单标题能正常变化，是因为你直接使用了传入的 preGameTrade 属性（比如 preGameTrade.name），每次父组件传入新的 preGameTrade，组件会重新渲染，标题自然更新；但 preGame 是本地状态，没有被触发更新，所以表单字段还保留着旧数据。

正确处理方式 #

必须通过 useEffect 监听 preGameTrade 的变化，当它更新时同步更新 preGame 状态。同时要注意拷贝原对象，避免后续编辑时意外修改到原对象（如果 preGameTrade 是嵌套结构，需要用深拷贝）。

示例代码：

import { useState, useEffect } from 'react';

function EditModal({ preGameTrade, isOpen, onClose }) {
  const [preGame, setPreGame] = useState({});

  // 监听preGameTrade变化，同步更新编辑状态
  useEffect(() => {
    // 浅拷贝适用于无嵌套的简单对象
    setPreGame({ ...preGameTrade });
    // 若为复杂嵌套对象，使用深拷贝：
    // setPreGame(JSON.parse(JSON.stringify(preGameTrade)));
  }, [preGameTrade]);

  // 表单字段变更处理
  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setPreGame(prev => ({ ...prev, [name]: value }));
  };

  // 提交逻辑
  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('提交数据:', preGame);
    // 后续对接后端接口
    onClose();
  };

  return (
    isOpen && (
      <div className="modal">
        <h2>编辑 {preGameTrade.name}</h2>
        <form onSubmit={handleSubmit}>
          <input
            name="name"
            value={preGame.name}
            onChange={handleInputChange}
          />
          {/* 其他表单字段 */}
          <button type="submit">提交</button>
          <button type="button" onClick={onClose}>取消</button>
        </form>
      </div>
    )
  );
}

补充说明 #

• 拷贝的必要性：如果直接将 preGameTrade 赋值给 preGame，两者会指向同一个引用，编辑时会直接修改原对象，导致展示页提前显示未提交的变更——这正是你一开始想避免的问题，所以拷贝是必须的。
• 浅拷贝 vs 深拷贝：如果 preGameTrade 只有一层属性，浅拷贝（{...obj}）足够；如果有嵌套对象（比如 preGameTrade.details.price），则需要用深拷贝切断引用。

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