React中如何将状态变量值作为另一状态对象的新键？

场景说明 #

有三个状态变量：

• newUser：初始为空字符串，通过表单输入框修改值
• users：初始化为 {currentUser: false}
• userInfo：初始化为 {id: "example", amount: "x", users}

点击按钮时调用以下handleAdd函数：

const handleAdd = e => {
    e.preventDefault();
    setUsers({...users, newUser: false})
    setUserInfo({
        id: "example",
        amount: "x",
        users
    })
    setNewUser("")
} 

当前问题 #

输入john后，期望users对象变为：

{
  currentUser: false,
  "john": false
}

但实际得到的是：

{
  currentUser: false,
  newUser: false
}

也就是变量名newUser被当成了键名，而非它的实际值。

解决方案 #

使用ES6的计算属性名，将变量newUser用方括号[]包裹，这样就会取变量的实际值作为对象的键名。同时为了避免React状态更新的异步问题，先创建更新后的users对象，再复用它更新两个状态：

const handleAdd = e => {
    e.preventDefault();
    // 用计算属性名生成新的users对象
    const updatedUsers = {...users, [newUser]: false};
    setUsers(updatedUsers);
    // 直接使用刚创建的updatedUsers，避免异步状态更新导致的旧值问题
    setUserInfo({
        id: "example",
        amount: "x",
        users: updatedUsers
    });
    setNewUser("");
}

原理说明 #

在对象字面量中，用方括号[]包裹表达式时，JavaScript会先计算表达式的值，再将这个值作为对象的键名。比如[newUser]会直接取newUser变量的当前值（如john），而非把字符串newUser作为键。

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