Javascript React不适用于js Set:s（数据类型）？

我尝试使用带有React的js集，但它不会像我想象的那样更新。考虑下面的22个例子。按动按钮时应该是绿色的。第一个带一套的（不工作）

let按钮=[
“按钮1”，
“按钮2”，
“按钮3”，
“按钮4”，
“按钮5”，
“按钮6”，
“按钮7”，
“按钮8”，
]
按初始值=[]
功能MyComponent（道具）{
让[pressed，setPressed]=React.useState（[]）
回来
{buttons.map（按钮=>{
返回{
设置按下（[…按下，按钮]）
}
}
样式={按下。包括（按钮）{背景颜色：“绿色”}:{}
>
{按钮}
})}
}
const domContainer=document.querySelector（'renderDiv'）；
render（React.createElement（MyComponent），domContainer）
React通过比较新旧状态来决定是否重新提交。如果它们是
==
，组件将不会重新加载

.add
不会创建新集合；它变异并返回旧的。这意味着现在新旧状态将指向内存中的相同位置。因此，他们将是平等的

始终避免React中的状态突变，否则可能会发生意外行为。这里，由于新组件状态（在
按下的
状态变量中）是
==
到旧组件状态，因此不会发生重新渲染

设置状态时，请重新设置：

setPressed(new Set([...pressed, button]))


let按钮=[
“按钮1”，
“按钮2”，
“按钮3”，
“按钮4”，
“按钮5”，
“按钮6”，
“按钮7”，
“按钮8”，
]
按初始设置=新设置（）
功能MyComponent（道具）{
let[pressed，setPressed]=React.useState（pressedInitial）
回来
{buttons.map（按钮=>{
返回{
设置按下（新设置（[…按下，按钮]）
}
}
样式={按下.有（按钮）{背景颜色：“绿色”}:{}
>
{按钮}
})}
;
}
const domContainer=document.querySelector（'renderDiv'）；
render（React.createElement（MyComponent），domContainer）
React通过比较新旧状态来决定是否重新提交。如果它们是
==
，组件将不会重新加载

.add
不会创建新集合；它变异并返回旧的。这意味着现在新旧状态将指向内存中的相同位置。因此，他们将是平等的

始终避免React中的状态突变，否则可能会发生意外行为。这里，由于新组件状态（在
按下的
状态变量中）是
==
到旧组件状态，因此不会发生重新渲染

设置状态时，请重新设置：

setPressed(new Set([...pressed, button]))


let按钮=[
“按钮1”，
“按钮2”，
“按钮3”，
“按钮4”，
“按钮5”，
“按钮6”，
“按钮7”，
“按钮8”，
]
按初始设置=新设置（）
功能MyComponent（道具）{
let[pressed，setPressed]=React.useState（pressedInitial）
回来
{buttons.map（按钮=>{
返回{
设置按下（新设置（[…按下，按钮]）
}
}
样式={按下.有（按钮）{背景颜色：“绿色”}:{}
>
{按钮}
})}
;
}
const domContainer=document.querySelector（'renderDiv'）；
render（React.createElement（MyComponent），domContainer）

谢谢您的回答。在理解之前，我不得不考虑了一会儿，所以我做了一次编辑，以填补我所缺少的部分。我想这可能也会帮助其他人。如果您不同意，请随时回滚！谢谢你的回答。在理解之前，我不得不考虑了一会儿，所以我做了一次编辑，以填补我所缺少的部分。我想这可能也会帮助其他人。如果您不同意，请随时回滚！