無法找到問題隱藏在哪里。我正在更改狀態，但組件不會重新渲染。所以這是我的代碼：
export const InterestsPupup: React.FC = ({interests, title, buttonText}) => {
const [activeItems, setActiveItems] = useState(new Set())
const clickOnItemHandler = (item: string) => {
let newSet = activeItems
activeItems.has(item) ? newSet.delete(item) : newSet.add(item)
setActiveItems(prev => newSet)
}
return (
<div className={styles.Container__main}>
{interests.map((item , index) => {
return (
<div
key={index}
className={activeItems.has(item) ? clsx(styles.item, styles.item_active) : styles.item}
onClick={() => clickOnItemHandler(item)}
>{item}</div>
)
})}
</div>
);
};
我的狀態為Set，我正在更改該狀態并且沒有任何反應，只有在我重新打開該彈出組件之后。所以我的狀態發生了變化，但組件沒有重新渲染
uj5u.com熱心網友回復：
您正在更改您的狀態，您需要確保傳入一個新的集合物件而不是相同的集合物件參考。盡管您已經修改了集合，但您仍然通過相同的集合物件：
setActiveItems(currSet => {
const newSet = new Set(currSet);
if(newSet.has(item))
newSet.delete(item);
else
newSet.add(item);
return newSet;
});
我已經用 if 陳述句替換了三元。? :當您想要使用它回傳的值時，通常使用條件運算子，但是，在您的情況下，該值沒有被使用，因此 if 陳述句更合適。
uj5u.com熱心網友回復：
你應該這樣寫：
setActiveItems(newSet);
uj5u.com熱心網友回復：
有人剛剛寫了一條評論，幫助并在之后洗掉了它，但謝謝答案是：我只需要改變這個
let newSet = activeItems
對此：
let newSet = new Set([...activeItems])
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/487924.html
標籤：javascript 反应
上一篇：如何制作多用戶編輯器組態檔