React+TypeScript状态数组添加对象及提交值异常排查

嘿，我来帮你拆解下这段代码里的问题，你没法正确添加用户到数组里主要是这几个原因：

1. 错误的状态更新逻辑（handleChange） #

你现在的handleChange直接把users数组当成普通对象去更新，完全搞错了结构！users是一个数组，而你每次输入都在执行{ ...this.state.users, [event.target.name]: event.target.value }，这会把数组转成对象，把输入字段当成对象的key，直接破坏了users的数组结构。

正确的做法应该是单独维护一个临时的表单状态，用来存储当前输入的name/email/phone，而不是直接操作users数组。

2. onAdd方法没有添加新用户 #

你的onAdd里只是复制了原有的users数组，根本没把当前输入的用户信息加进去。而且setState是异步操作，你在setState之后直接console.log(this.state.users)，拿到的还是更新前的旧值，这也是你看不到正确信息的原因之一。

3. 表单提交的默认行为没阻止 #

表单的submit事件默认会刷新页面，你需要在onAdd里调用event.preventDefault()，否则页面一刷新，状态就全丢了。

修复后的完整代码 #

import * as React from 'react';

interface IState { 
  users: Account[];
  // 新增临时表单状态，存储当前输入的用户信息
  currentUser: Account;
}

interface Account { 
  name: string; 
  email: string; 
  phone: string 
}

export default class App extends React.Component<{}, IState> {
  constructor(props: any) { 
    super(props); 
    this.state = { 
      users: [],
      // 初始化临时表单状态
      currentUser: { name: '', email: '', phone: '' }
    } 
  }

  handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const { name, value } = event.target;
    // 更新临时的currentUser状态，而不是直接操作users数组
    this.setState(prevState => ({
      currentUser: {
        ...prevState.currentUser,
        [name]: value
      }
    }));
  }

  onAdd = (event: React.FormEvent<HTMLFormElement>) => {
    // 阻止表单默认刷新行为
    event.preventDefault();
    
    // 把当前输入的用户添加到users数组
    this.setState(prevState => ({
      users: [...prevState.users, prevState.currentUser],
      // 清空临时表单，方便下次输入
      currentUser: { name: '', email: '', phone: '' }
    }), () => {
      // 在setState的回调里打印，才能拿到最新的状态
      console.log(this.state.users);
    });
  }

  render() {
    return (
      <React.Fragment>
        <form onSubmit={this.onAdd}>
          <input 
            type="text" 
            onChange={this.handleChange} 
            name="name" 
            value={this.state.currentUser.name} {/* 绑定value，变成受控组件 */}
            placeholder="Name"
          />
          <input 
            type="text" 
            onChange={this.handleChange} 
            name="email" 
            value={this.state.currentUser.email}
            placeholder="Email"
          />
          <input 
            type="text" 
            onChange={this.handleChange} 
            name="phone" 
            value={this.state.currentUser.phone}
            placeholder="Phone"
          />
          <button type="submit">Add</button>
        </form>
        {/* 可以加个列表展示已添加的用户，方便验证 */}
        <ul>
          {this.state.users.map((user, index) => (
            <li key={index}>
              {user.name} - {user.email} - {user.phone}
            </li>
          ))}
        </ul>
      </React.Fragment>
    );
  }
}

关键修改点说明 #

• 新增了currentUser状态来临时存储当前输入的用户信息，避免直接操作users数组
• handleChange现在只更新currentUser，保持users数组的结构正确
• onAdd里先阻止表单默认行为，然后把currentUser添加到users数组，同时清空表单
• 使用setState的回调函数来打印最新状态，因为setState是异步的
• 把输入框改成受控组件，绑定value属性，确保表单值和状态同步

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