Next.js状态变更后UI未重渲染、激活样式不生效问题

• React的状态更新依赖引用变更：你直接复用了原状态数组amenitiesList的引用，修改后传给setAmenitiesList，React做浅比较时认为状态没有变化，不会触发组件重渲染
• 遍历数组时直接修改了原有对象的active属性，没有生成新的对象实例
• 原代码中addAmenity函数定义在组件外部，无法访问组件内部的状态和状态更新方法

组件JS代码 #

import { useState } from 'react'
import WcIcon from '@mui/icons-material/Wc'
import FastfoodIcon from '@mui/icons-material/Fastfood'
import WifiIcon from '@mui/icons-material/Wifi'

const amenitiesDefaultArr = [
    {
        data: "bathroom",
        text: "Private Bathroom",
        icon: <WcIcon fontSize="large" />,
        active: false,
    },
    {
        data: "dining",
        text: "Dining Hall",
        icon: <FastfoodIcon fontSize="large" />,
        active: false,
    },
    {
        data: "wifi",
        text: "Wifi",
        icon: <WifiIcon fontSize="large" />,
        active: false,
    }
]

const AddDorm = () => {
    const [amenitiesList, setAmenitiesList] = useState(amenitiesDefaultArr)

    const addAmenity = (e) => { 
        const dataItem = e.currentTarget.dataset.amenity
        // 生成新数组，不修改原状态引用
        const newList = amenitiesList.map(el => {
            // 匹配到目标项时返回新对象，其他项直接返回
            if (el.data === dataItem) {
                return {
                    ...el,
                    active: !el.active
                }
            }
            return el
        })
        setAmenitiesList(newList)
    }

    return (
        <>
         {
            amenitiesList.map(el => {
                const {data, text, icon, active } = el
                return (
                    <div 
                        className={`amenity ${active ? 'amenity-active' : ''}`} 
                        key={data} 
                        data-amenity={data}
                        onClick={addAmenity}
                     >
                        <p>{text}</p>
                        {icon}
                    </div>
               )
            })
         }
        </>
    )
}

export default AddDorm

CSS代码（无需修改） #

.amenity {
  padding: 0.5rem 1rem;
  display: flex;
  align-items: center;
  border-radius: 50px;
  box-shadow:  5px 5px 10px #919191,
              -5px -5px 10px #ffffff;
  z-index: 4;
  cursor: pointer;
}

.amenity-active {
  background-color: var(--green);
}

内容的提问来源于stack exchange，提问作者BrettScheepers