您需要创建sites数组的副本，对副本进行更改，然后将其设置为状态。永远不要直接改变状态，因为如果我们用相同的对象引用更新状态，它可能不会触发重新呈现。

const changeActive = (id) => {
   const tmpSites = [...sites];
   for (const s in tmpSites) {
      if (tmpSites[s].id === id) {
         tmpSites[s].active = !Boolean(tmpSites[s].active);
      }
   }
   setSites(tmpSites);
};

因为您正在改变原始的sites Object，而不是在进行更改之前克隆它，所以useState（“setSites”）实际上不会重新呈现组件，因为它无法比较前一个Object和当前Object，因为它们是相同的。
你必须对sites对象数组进行深度克隆：

const changeActive = (id) => {
   setSites(sites => {
     sites.map(site => ({  // ← first-level clone
        ...site            // ← second-level clone
        active: site.id === id ? !site.active : site.active
     }))
   })
}

必须使用setSites函数返回当前状态，然后才能可靠地深度克隆它。