如何使用反应钩子在带有数据映射的切换开关中设置状态?

Question

当我使用布尔值时，我能够使用 react 钩子使用数据映射设置状态 我有一个开关按钮，可以从启用切换到禁用 所以status可以是真的，也可以是假的...启用status == true时和禁用时status == false

下面工作正常

setData(data => data.map(el => el.id === postid
? { ...el, status: !el.status }
: el
));

但是现在我想使用一个字符串，以便status现在将使用enabled或disabled值，而不是真或假的布尔值

所以什么时候el.status == disabled然后status == enabled，什么时候el.status == enabled然后status == disabled

我该怎么做才能从上面的代码中完成同样的事情？

更新：

以下是我目前如何获取defaultChecked值以与切换开关一起使用

<label className="switch">
<input type="checkbox" defaultChecked={el.status} onClick={() => updatePost(el.id, k)} />
<span className="slider round"> </span>
</label>

Answer 1

您可以添加一些简单的辅助函数，该函数转换为字符串状态：

const toStatus = (val) => val === true ? "enabled" : "disabled";

然后转换变得更加简单。让我举一个例子：

let arr = [
{id: 1, status: false}, 
{id: 2, status: true}, 
{id: 3, status: false}, 
]
const toStatus = (val) => val === true ? "enabled" : "disabled";
const withStringValues = arr.map(item => ({ ...item, status: toStatus(item.status) }))
console.log(withStringValues)

然后添加一个新常量，通过将string转换回boolean来跟踪defaultChecked值

const toSwitch = (val) => val === "enabled" ? true : false;

然后将切换开关更新为此

<label className="switch">
<input type="checkbox" defaultChecked={toSwitch(el.status)} onClick={() => updatePost(el.id, k)} />
<span className="slider round"> </span>
</label>