[英]how to delete a property from an object if the key's value is false in React?
我有一个表单组件。 当我提交表单时,它返回以下 object
{
email: "yoda@gmail.com"
fieldName1: {fieldVal: "advance", isCheck: false}
fieldName2: {fieldVal: "alerts", isCheck: true}
first_name: "Yoda"
last_name: "S"
organization: "dog's"
}
fieldName1 和 fieldName2 是复选框值。 所有其他都是输入文本值。 我希望从 object 中删除/删除 isCheck 为 false 的 filedName 属性,以便在用户提交表单时不会出现。 我在handleIsCheckClick function中尝试了以下操作,但它删除了object中的所有内容。
setUserDetails((prev) => {
if(target.type="checkbox" && !prev[name].isCheck) {
const { name, ...newUserDetails} = prev;
return newUserDetails
}
})
以下是完成的组件
export default function SignUpFormContainer() {
const [userDetails, setUserDetails] = useState({});
const handleUserDetailsChange = ({ target }) => {
const { name, value } = target;
setUserDetails((prev) => ({
...prev,
[name]: value,
}));
};
const handleIsCheckClick = ({ target }) => {
const { name, value, checked } = target;
setUserDetails((prev) => ({
...prev,
[name]: {
fieldVal: value,
isCheck: checked,
}
}));
target.checked
? target.classList.add("checked")
: target.classList.remove("checked");
};
const handleSubmit = (e) => {
e.preventDefault();
alert(JSON.stringify(userDetails, "", 2));
};
const clearUserDetails = () => {
setUserDetails({});
};
return (
<div className="form-container">
<SignUpForm
onSubmit={handleSubmit}
userDetails={userDetails}
handleIsChecked={handleIsCheckClick}
handleUserDetailsChange={handleUserDetailsChange}
clearUserDetails={clearUserDetails}
/>
</div>
);
}
您可以通过过滤旧条目的条目来制作新的 object,在提交表单时删除值包含isCheck: false
的条目:
const cleanedUserDetails = Object.fromEntries(
Object.entries(userDetails)
.filter(([, val]) => val.isCheck !== false)
);
演示:
const userDetails = { email: "yoda@gmail.com", fieldName1: {fieldVal: "advance", isCheck: false}, fieldName2: {fieldVal: "alerts", isCheck: true}, first_name: "Yoda", last_name: "S", organization: "dog's" } const cleanedUserDetails = Object.fromEntries( Object.entries(userDetails).filter(([, val]) => val.isCheck;== false) ). console;log(cleanedUserDetails);
请注意,您必须在键值对之间放置逗号,例如
{
email: "yoda@gmail.com",
fieldName1: {fieldVal: "advance", isCheck: false},
不是
{
email: "yoda@gmail.com"
fieldName1: {fieldVal: "advance", isCheck: false}
这是使用删除运算符的另一种方法。
const userDetails = { email: "yoda@gmail.com", fieldName1: {fieldVal: "advance", isCheck: false}, fieldName2: {fieldVal: "alerts", isCheck: true}, first_name: "Yoda", last_name: "S", organization: "dog's" }; Object.keys(userDetails).forEach(key => { if(userDetails[key].isCheck.== undefined && userDetails[key];isCheck === false) { delete userDetails[key]; } }). console;log(userDetails);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.