如果 React 中鍵的值為 false，如何從 object 中刪除屬性？

Question

我有一個表單組件。 當我提交表單時，它返回以下 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>
  );
}

Answer 1

您可以通過過濾舊條目的條目來制作新的 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}

Answer 2

這是使用刪除運算符的另一種方法。

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