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

Question

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

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

我知道 setState 将通过影响组件的当前状态来更新此组件的状态，在这种情况下，将 currentState 和用户对象各自合并到一个新状态中。这是否意味着当我添加一个新用户 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 以反映对触发事件的输入的更改，使用输入的名称作为 property/key 并将输入的值作为其值，同时保留其他值。

括号语法 [name] 是 computed property，所以如果输入的名称是“banana”，这相当于设置 { banana: value }.

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

setState using spread operator on currentState object

javascript

destructuring

ecmascript-6

reactjs