如果 React 中键的值为 false，如何从对象中删除属性？答案

【问题标题】：how to delete a property from an object if the key's value is false in React?如果 React 中键的值为 false，如何从对象中删除属性？
【发布时间】：2021-07-27 07:40:00
【问题描述】：

我有一个表单组件。当我提交表单时，它返回以下对象

{
  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 是复选框值。所有其他都是输入文本值。我希望从对象中删除/删除 isCheck 为 false 的 filedName 属性，以便在用户提交表单时不会出现。我在 handleIsCheckClick 函数中尝试了以下操作，但它删除了对象中的所有内容。

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

【问题讨论】：

标签： javascript reactjs forms object use-state

【解决方案1】：

您可以通过过滤旧对象的条目来创建新对象，在提交表单时删除值包含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}

【讨论】：

嗨@CertainPerformance！感谢您的帮助，但提供的解决方案也返回一个空对象。
再试一次，需要反转条件。可能最容易与 not false 进行比较。

【解决方案2】：

这是使用delete 运算符的另一种方式。

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

【讨论】：