为什么当 Set 状态改变时我的 React 组件没有重新渲染？

Question

Can't get where is the problem hiding. I'm changing state but the component not rerender. So this is my code:

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>
  );
};

There is my state in shape of Set , i'm changing that state and nothing is happens, only after i reopen that popup component. So my state changes but the component doesn't rerender

Answer 1

You're changing your state in place, you need to ensure you are passing in a new set object and not the same set object reference. Although you've modified the set, you're still passing through the same set object:

setActiveItems(currSet => {
  const newSet = new Set(currSet);
  if(newSet.has(item))
    newSet.delete(item);
  else
    newSet.add(item);
  return newSet;
});

I've replaced the ternary with an if-statement. The conditional operator ? : ? : is generally used when you want to use the value that it returns, however, in your case the value isn't being used, so an if-statement is more appropriate.

Answer 2

你应该这样写：

setActiveItems(newSet);

Answer 3

Someone just wrote a comment that helped and deleted it right after, but thank you The answer was: I just had to change this

let newSet = activeItems

On this:

let newSet = new Set([...activeItems])