setState在currentState对象上使用扩展运算符

Question

我正在尝试理解以下语法：

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

我知道setState将通过影响组件的当前状态来更新此组件的状态，在这种情况下，将currentState和user对象合并为一个新状态。这是否意味着当我添加一个新用户A然后添加第二个用户B时，状态对象将同时具有A和B对象作为新状态，即两个user对象？

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>
    );
  }
} 

Answer 1

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

括号中的语法[名称]是computed property，因此，如果输入的名称是“香蕉”，则相当于设置{ banana: value }。