React应用中Form Data状态变量设置为空问题求助

嘿，我看了你的代码，问题出在状态更新的逻辑和表单name属性的匹配上，导致输入值没法正确同步到FormData里。让我一步步给你拆解问题和修复方式：

核心问题点 #

1. 你的FormData是一个包裹着单个对象的数组，但表单输入的name用的是FormData.FirstName这种路径，而你写的onChangeHandler直接用setState({[nam]: val})，这会在state里新增一个叫FormData.FirstName的独立属性，根本没碰原来的FormData数组。
2. React的setState不会自动解析这种点分隔的嵌套路径，你需要手动处理嵌套对象/数组的状态更新逻辑。

方案1：把FormData改成单个对象（更推荐，因为你是单条表单数据） #

如果你的表单只是处理单条用户信息，完全没必要把FormData做成数组，改成单个对象会简单很多：

1. 修正初始状态

this.state = {
  FormData: {
    UserId: 0,
    FirstName: '',
    LastName: '',
    EmailId: '',
    MobileNo: '',
    DivisionId:'',
    UserName: '',
    Password: '',
    ConfirmPassword: '',
    RoleId: '',
    UpdateUserName: localStorage.getItem("UserId"),
    GridState: []
  }
};

2. 重写onChangeHandler处理嵌套对象

我们需要解析name里的路径，找到要更新的属性：

onChangeHandler = (event) => {
  const { name, value } = event.target;
  // 把"FormData.FirstName"拆成["FormData", "FirstName"]
  const [stateKey, fieldKey] = name.split('.');
  
  this.setState(prevState => ({
    [stateKey]: {
      // 复制原对象，避免直接修改状态
      ...prevState[stateKey],
      // 更新目标属性
      [fieldKey]: value
    }
  }));
}

3. 给输入框加上value绑定（必须！）

别忘了把输入框改成受控组件，绑定state里的值，否则可能出现值不同步：

<input 
  type="text" 
  name="FormData.FirstName" 
  className="form-control form-control-sm" 
  id="TxtFirstName" 
  placeholder="First Name" 
  required 
  onChange={this.onChangeHandler}
  value={this.state.FormData.FirstName}
/>

你的其他输入框也一样，都要加上对应的value属性。

方案2：保留FormData为数组（如果业务必须） #

如果你确实需要FormData是数组结构（比如要处理多条数据），那得明确指定数组索引：

1. 修改表单输入的name属性

把name改成FormData[0].FirstName这种格式，告诉代码要更新数组的第0项：

<input 
  type="text" 
  name="FormData[0].FirstName" 
  className="form-control form-control-sm" 
  id="TxtFirstName" 
  placeholder="First Name" 
  required 
  onChange={this.onChangeHandler}
  value={this.state.FormData[0].FirstName}
/>

2. 调整onChangeHandler处理数组嵌套

onChangeHandler = (event) => {
  const { name, value } = event.target;
  // 把"FormData[0].FirstName"转成["FormData", "0", "FirstName"]
  const [stateKey, indexStr, fieldKey] = name.replace(/\[|\]/g, '.').split('.');
  const index = parseInt(indexStr, 10);

  this.setState(prevState => {
    // 复制原数组，不能直接修改state里的数组
    const updatedFormData = [...prevState[stateKey]];
    // 更新指定索引的对象
    updatedFormData[index] = {
      ...updatedFormData[index],
      [fieldKey]: value
    };
    return {
      [stateKey]: updatedFormData
    };
  });
}

最后检查提交逻辑 #

你的onSubmitHandler可以保留，不过建议提交前先打log确认状态：

onSubmitHandler = (event) => {
  event.preventDefault();
  console.log("当前FormData状态：", this.state.FormData);
  alert(JSON.stringify(this.state.FormData));
}

这样改完后，输入框的值就能正确同步到FormData里了，提交的时候就能看到正确的内容啦～

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