React中使用扩展运算符添加state对象数据到嵌套对象失败

核心问题1：动态对象键语法错误 #

你当前代码里用ru作为新属性键时，JavaScript会把它当作字面量字符串"ru"，而不是变量ru对应的用户名。要实现动态键，必须用方括号包裹变量。

核心问题2：userData未纳入React状态管理 #

你定义的userData是普通变量，哪怕用扩展运算符生成了新对象，也不会触发组件重新渲染，看起来就像数据没添加进去。React中需要维护的状态必须用useState声明。

修正后的完整代码 #

1. 将userData转为state变量 #

import { useState } from 'react';

function YourComponent() {
  // 把userData初始化为React状态
  const [userData, setUserData] = useState({
    harsh:{
        password:"harsh",
        email:"harsh@",
        mobile:999999999,
    },
    mehul:{
        password:"mehul",
        email:"mehul@",
        mobile:8888888888,
    },
    khushboo:{
        password:"khushboo",
        email:"khushobo@",
        mobile:7777777777,
    }
  });

  const [regDetails,setRegDetails] = useState({
      regUser:'',
      regPass:'',
      regEmail:'',
      regMobile:'',
  });

2. 修改handleReg函数，正确更新状态 #

const handleReg = (usernames) => {
      console.log("in handle register");
      // 简化用户名重复检查
      if(usernames.includes(regDetails.regUser)) {
          console.log("username already exists kindly use a different username or login");
          return;
      }
      console.log("trying to add data in userData");
      const newUsername = regDetails.regUser;
      // 使用函数式更新确保拿到最新状态，动态键用[newUsername]
      setUserData(prevUserData => ({
          ...prevUserData,
          [newUsername]: {
              password: regDetails.regPass,
              email: regDetails.regEmail,
              mobile: regDetails.regMobile,
          }
      }));
  };

  // 组件其他逻辑...
}

关键细节说明 #

• 动态对象键：[newUsername]会把变量的值作为属性名，而非变量名本身，这样就能正确添加以用户名作为键的新用户数据。
• 函数式更新state：用prevUserData => ...是因为新状态依赖旧状态时，函数式更新能确保拿到最新的state值，避免闭包导致的旧值问题。
• 简化重复检查：用数组的includes方法替代for循环，代码更简洁高效。

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