onClick事件触发时如何使用setState修改对象数组中的指定属性值

修正方案 #

你的原代码存在两个核心问题：

• setJobType 调用语法错误，且没有正确操作数组类型的状态
• 缺失遍历重置所有项状态、单独设置选中项的逻辑

修正后的完整代码 #

const [jobType, setJobType] = useState([
    {
        "class": "active",
        "type": "All Jobs"
    },
    {
        "class": "inActive",
        "type": "My Jobs"
    },
    {
        "class": "inActive",
        "type": "Saved Jobs"
    },
])

const jobTypeClick = (event, selectedType) =>{
    // 生成新的状态数组：先把所有项设为inActive，再匹配选中项设为active
    const newJobType = jobType.map(item => {
        return {
            ...item,
            "class": item.type === selectedType ? "active" : "inActive"
        }
    })
    setJobType(newJobType)
}

const jobTypes = jobType.map((data) => {
    return (
        <p className={`${data.class} mb-0 px-3 secondary-font fs-16`} key={data.type} onClick={event => jobTypeClick(event, data.type)}>{data.type}</p>
    )
})

改动说明 #

• 点击事件接收选中的type值作为判断依据，遍历原jobType数组生成新数组
• 遍历时统一判断：如果当前项的type和选中的type一致，class设为active，否则全部设为inActive
• 修正了setJobType的传参逻辑，直接传入完整的新数组即可
• 优化了className的拼接写法，改用模板字符串更易读

内容的提问来源于stack exchange，提问作者Muhammad Azfar Aslam