地图中的动态类名在更新后不会改变

Question

当映射为循环遍历项目的变量中的更改className时，我正在尝试更新我的反应。activesites发生的情况是，如果活动状态更改为或反之亦然， className“非活动”不会消失。true代码：// Context: this code is inside of the componentconst [sites, setSites] = useState([]);  <--- Updated dynamically with fetch()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);};return (    {sites.length ? sites.map((item, i) => {       return (          <tr className={`${!Boolean(item.active) ? 'inactive' : ''}`} key={item.id}>              // inbetween data          </tr>       )    }) : null})

Answer 1

您需要创建站点数组的副本并对副本进行更改，然后将其设置为状态。永远不要直接改变状态，因为它可能不会导致重新渲染，因为我们正在使用相同的对象引用更新状态。

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

};

Answer 2

因为您正在改变原始站点对象而不是在进行更改之前对其进行克隆，所以useState（“setSites”）实际上不会重新呈现组件，因为它无法将以前的对象与当前对象进行比较，因为它们是相同的。

您必须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状态的函数，然后您才能可靠地对其进行深度克隆。