如何更改对象数组中的 setState 特定值 onClick 事件？

Question

我想在单击时更改我本地状态中的活动类并将 inActive 更改为该状态中的所有其他对象。

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

const jobTypeClick = (event, item) =>{
        alert("I am clicked")
        console.log(item)
        setJobType(...jobType, jobType.class:"active")
    }

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

Answer 1

此解决方案可行，但请记住 type 应该是唯一的

const jobTypeClick = (event, item) => {
    setJobType(jobType.map(t => {
        return { ...t, "class": (t.type === item) ? "active" : "inActive" }
    }))
}

否则，您可以将元素索引传递给函数，以确保您在 Array 中的唯一性。另一个不错的功能是将回调传递给set。回调将接收最新的值，允许您在异步逻辑中使用此函数。

const jobTypeClick = (event, index) => {
    setJobType(current => current.map((t, ix) => ({ ...t, "class": (ix === index) ? "active" : "inActive" }));
}

Answer 2

你在 setJobType 中所做的是错误的 setJobType(...jobType, jobType.class:"active")
要设置JobType，您需要传递具有更新值的数组

您需要循环所有 jobTyes 并使类“inActive”到所有对象 并将具有相同点击索引的那个设置为“活动”

您可以使用以下代码 我添加了第三个参数来从 click 元素中读取索引 并循环所有 jobTypes 并将正确的一个设置为 active ，将另一个设置为 inActive

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

const jobTypeClick = (event, item, i ) =>{
        alert("I am clicked")
        console.log(item)
        let prevJobType = [...jobType];
        prevJobType.map((d,index) => {...d, class: index == i ? "active" : "inActive")
        setJobType(prevJobType)
    }

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