Javascript 在currentState对象上使用扩展运算符设置状态

我试图理解以下语法：

this.setState(currState => ({
      ...currState,
      user: {
        ...currState.user,
        [name]: value,
      },
    }));

我知道setState会通过影响组件的当前状态来更新该组件的状态，在这种情况下，会将currentState和user对象合并到一个新状态中。这是否意味着当我添加一个新用户

a

，然后添加第二个用户

B

，状态对象将同时具有

a

和

B

对象作为新状态，即两个

用户

对象

class AddUser extends Component {
  state = {
    user: {
      firstName: '',
      lastName: '',
      username: '',
    },
    userExists: false,
  };
  contactExists = currUsername => {};

  handleSubmit = event => {};

  handleInputChange = event => {
    const { name, value } = event.target;
    this.setState(currState => ({
      ...currState,
      user: {
        ...currState.user,
        [name]: value,
      },
    }));
  };
  isDisabled = () => {};

  render() {
    const { firstName, lastName, username } = this.state.user;

    return (
      <div>
        <h1>New User</h1>
        <form onSubmit={this.handleSubmit}>
          <div>
            <input
              type="text"
              name="firstName"
              placeholder="Enter First Name"
              value={firstName}
              onChange={this.handleInputChange}
            />
            <input
              type="text"
              name="lastName"
              placeholder="Enter Last Name"
              value={lastName}
              onChange={this.handleInputChange}
            />
            <input
              type="text"
              name="username"
              placeholder="Enter username"
              value={username}
              onChange={this.handleInputChange}
            />
          </div>
          <button disabled={this.isDisabled()}>Add</button>
        </form>
        {this.state.userExists ? (
          <p className="error">You cannot add a user that already exists.</p>
        ) : (
          ''
        )}
      </div>
    );
  }
} 

class AddUser扩展组件{
状态={
用户：{
名字：''，
姓氏：“”，
用户名：“”，
},
userExists:false，
};
contactExists=currUsername=>{}；
handleSubmit=event=>{}；
handleInputChange=事件=>{
常量{name，value}=event.target；
this.setState（currState=>({
……国家，
用户：{
…currState.user，
[名称]：值，
},
}));
};
isDisabled=（）=>{}；
render（）{
const{firstName，lastName，username}=this.state.user；
返回(
新用户
添加
{this.state.userExists(
无法添加已存在的用户
) : (
''
)}
);
}
} 

此更新state.user以反映对触发事件的输入的更改，使用输入的名称作为属性/键，输入的值作为其值，同时保留其他值

---

括号语法[name]是一个，因此如果输入的名称是“banana”，这相当于设置

{banana:value}

，您可以尝试运行它，看看会发生什么：）您只需覆盖

用户

子对象的相应属性。如果您想容纳多个用户，该属性应该是此类对象的数组（显然您必须更改状态更新代码以匹配）。@ggorlen我在控制台中运行过它，谢谢！但是你有没有注意到，这个被接受的答案是如何帮助我揭示了一些让我完全不感兴趣的事情！？无论如何，谢谢你！我不熟悉ES6语法。非常感谢您解释计算属性。这就是拼图中缺失的部分。我还尝试在控制台中运行一个测试：

var state={user:{firstName:''，lastName:''，username:''，}，userExists:false，}

，并使用：

（{…state，user:{…state.user，firstName:'AJ'，}）进行测试，这更清楚了！