Javascript 将集合状态反应为嵌套对象值

我需要设置动态变化的嵌套对象值的状态，我不确定如何才能做到这一点，这就是我所尝试的

const [userRoles] = useState(null);

const { isLoading, user, error } = useAuth0();

useEffect(() => {
    console.log(user);
    // const i = Object.values(user).map(value => value.roles);
    // ^ this line gives me an react error boundary error 
  }, [user]);

// This is the provider
<UserProvider
      id="1"
      email={user?.email}
      roles={userRoles}
>

---

我需要获取角色值，但其父项“website.com”在每次调用api时都会更改，因此我需要找到一种搜索角色的方法。

您可以使用键

roles

搜索元素的值，如果找到，则返回

roles

值，否则将返回

未定义的

Object.values(user).find(el => el.roles)?.roles;

注意：我完全同意其他人的看法，即您应该尝试规范化数据，以避免使用任何动态生成的属性键

const user1={
名称：“GGG”，
“website.com”：{
角色：[“超级用户”]，
详细信息：{}
},
朋友们：{}，
其他数据：{}
}
常量user2={
名称：“GGG”，
朋友们：{}，
其他数据：{}
}
constroles1=Object.values（user1）.find（el=>el.roles）？.roles；
constroles2=Object.values（user2）.find（el=>el.roles）？.roles；
console.log（角色1）；//[“超级用户”]
console.log（角色2）；//未定义

我认为您需要修改对象的形状。我觉得奇怪的是，有些键似乎是固定的，但有一个键似乎是可变的。动态关键点可能非常有用，但这似乎不是使用它们的正确位置。我建议您将用户对象的形状更改为以下形状：

{
    name: "GGG",
    "website.com": {
      roles: ["SuperUser"],
      details: {}
    },
    friends: {},
    otherData: {}
}

{
    name: "GGG",
    site: {
      url: "website.com",
      roles: ["SuperUser"],
      details: {}
    },
    friends: {},
    otherData: {}
}

---

在您的特定用例中，固定键将为您省去很多麻烦。

我建议大家不要在数据对象中使用动态键

---

对于更新复杂的对象状态，我知道如果您使用的是React钩子，那么您可以使用spread操作符，基本上克隆状态并使用更新版本进行更新

我不清楚这和反应状态有什么关系。听起来目标似乎是在JavaScript中找到一种方法来检查对象的属性，看看哪个（如果有的话）包含一个名为

roles

的属性。是吗？是的，这是它的一部分，但我需要将它设置为状态部分的react状态。您只是缺少

setUserRoles

部分的

useState

调用。请看中的示例。您可以这样做：

const[userRoles，setUserRoles]=useState（null）

然后在组件中，每当您想要设置该状态值时，您都会调用

setUserRoles

函数并将新对象传递给它。这个用户对象来自哪里？我建议您通过制作一个固定键（如

site

）而不是基于URL的动态键，在对象级别解决这个问题。