State does not update React Hook

Question

所以我正在做一个rpg特征随机化器，在那里我有一个数组中的特征，我可以根据选择选择随机或添加，但是，每当我单击这些按钮中的任何一个时，应该显示数组的选择上的状态都不会得到更新，只有当我打开添加特征选择时。

简而言之，问题是添加后的数组没有显示在显示器中。

return (
<div 
}} className="Traits">
<text style={{ fontWeight: 'bold' }}>Traits</text>
<br /><button>Delete</button>
<select className="Traits-List"
multiple
>
{traitsList && (
traitsList.map((trait) => (
<option key={trait.label} value={trait.value}>{trait.label}</option>
)))}
</select>
<button onClick={(e) => { handleTraits() }}>Random</button><br />
<Select
placeholder={"traits"}
options={Traits}
menuPlacement="top"
styles={selectStyle}
onChange={handleTraitAddTemp} //?
></Select>
<button onClick={() => { handleAddTrait(tempTrait) }}>Add</button>
</div>
)

手柄功能

const [traitsList, setTraitsList] = useState([]);
const [tempTrait, setTempTrait] = useState({});
const handleTraitAddTemp = (e) => {
console.log(e)
setTempTrait(e);
}
function addTrait(Trait) { 
const tempTraits = traitsList;
console.log(traitsList)
if (tempTraits && tempTraits.includes(Trait))
return;
tempTraits.push(Trait)
console.log(tempTraits)
return tempTraits 
}
function handleAddTrait(Trait) {
let res = addTrait(Trait)
setTraitsList(res);
}
function handleTraits() {
let res = randomTraits()
setTraitsList(res)
}
function randomTraits() {
const tempTraits = traitsList;
let rng = randomNumber(1, 38)
console.log(rng)
console.log(tempTraits)
console.log(traitsList)
while ((tempTraits.length !== 0) && (tempTraits.includes(Traits[rng]))) {
rng = randomNumber(1, 38)
console.log(rng)
}
tempTraits.push(Traits[rng])
console.log(tempTraits)
return tempTraits
}

我点击左边的随机按钮，第二次我在菜单中选择一个特征，然后我得到的随机特征显示为

Answer 1

执行此操作时，const tempTraits = traitsList;将替换为以下内容。

const tempTraits = [...traitsList];