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

Question

当映射为循环遍历项目的变量中的更改className时，我正在尝试更新我的反应。activesites

发生的情况是，如果活动状态更改为或反之亦然， className“非活动”不会消失。true

代码：

// Context: this code is inside of the component

const [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) => {&nbsp; &nbsp;const tmpSites = [...sites];&nbsp; &nbsp;for (const s in tmpSites) {&nbsp; &nbsp; &nbsp; if (tmpSites[s].id === id) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;tmpSites[s].active = !Boolean(tmpSites[s].active);&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp;}&nbsp; &nbsp;setSites(tmpSites);};

Answer 2

因为您正在改变原始站点对象而不是在进行更改之前对其进行克隆，所以useState（“setSites”）实际上不会重新呈现组件，因为它无法将以前的对象与当前对象进行比较，因为它们是相同的。您必须sites对对象数组进行深度克隆：const changeActive = (id) => {&nbsp; &nbsp;setSites(sites => {&nbsp; &nbsp; &nbsp;sites.map(site => ({&nbsp; // ← first-level clone&nbsp; &nbsp; &nbsp; &nbsp; ...site&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // ← second-level clone&nbsp; &nbsp; &nbsp; &nbsp; active: site.id === id ? !site.active : site.active&nbsp; &nbsp; &nbsp;}))&nbsp; &nbsp;})}必须使用返回当前setSites状态的函数，然后您才能可靠地对其进行深度克隆。