根据以前的状态React JS更新布尔值



我正在尝试根据onClick中以前的状态更新布尔值。我在mock中有三个值,mockdata结构是它有一个对象数组。我在这个对象数组中有3个项目,因为我试图循环所有三个项目,对于列表中的第一个元素,我试图将布尔值从true更新为false,我尝试了多种方法来实现这一点,但所有的实现都失败了,我在许多论坛和youtube频道中搜索过,所有频道都在解释递增5的计数器。我并没有得到任何例子来获取处于其状态的对象数组并获得以前的值。当我试图直接访问项目中的一个元素时,它是有效的,但当我试图循环并选择第一个元素时我没有得到所需的输出。任何人都可以帮助我实现这一点。提前谢谢。

模拟数据:

const employeeData = {
employees: [
{
id: "112",
isCreated: true,
status: {
type: "NA"
},
Date: {
DOJ: "--"
}
},
{
id: "113",
isCreated: true,
status: {
type: "NA"
},
Date: {
DOJ: "--"
}
},
{
id: "114",
isCreated: true,
status: {
type: "NA"
},
Date: {
DOJ: "--"
}
}
]
};

组件:

const [processingEmployees, setProcessingEmployees] = useState(
employeeData.employees
);
//Direct Implementation this is working fine
const onClick = () => {
const employeeData = [...processingEmployees];
employeeData[0].isCreated = false;
setProcessingEmployees(employeeData);
};

PrevState实现

const onClick = () => {
setProcessingEmployees((prevState) => [
{
...prevState,
EmpData: prevState.map((Employee) => ({
...Employee,
isCreated: false
}))
}
]);
};

尝试这种方法。映射到prevState,如果项的索引为零,则从该项创建一个新对象,将isCreated更改为false。否则,请将物品单独放置。

const onClick = () => {
setProcessingEmployees((prevState) => 
prevState.map((emp, i) => 
i === 0 
? {...emp, isCreated: false}
: emp
)
);
};

最新更新