从我的数组中删除空项目并在选中复选框时删除所选项目答案

【问题标题】：Remove empty items from my array and remove selected item when checkbox checked in react从我的数组中删除空项目并在选中复选框时删除所选项目
【发布时间】：2020-01-24 18:51:36
【问题描述】：

const [person, setPerson] = useState(
        {
            name: "",
            age: "",
            school: "",
            address: "",
            telephone: "",

        }
    );

我想在选中复选框时删除 (telephone) 并且还想从我的数组中删除空值，如果任何值为空我想从我的数组中删除整个 -> (telephone: "")

【问题讨论】：

将值设置为 null/undefined 然后让应用程序代码使用它有什么问题？

标签： arrays reactjs checkbox

【解决方案1】：

要从您的人员对象中删除一项，您可以尝试：

handleCheckboxChange (value) {
  if (value === true) {
      const {telephone, ...state} = person;
      setPerson(state);
  }
}

用于删除空项目：

handleInputChange() {
  // an array of non-empty fields
  const fields = Object.entries(person).filter([key, value] => !!value);

  // create state object from entries
  const state = Object.fromEntries(fields);

  setPerson(state);
}

但是...使用钩子，建议将状态分成几部分，如下所示：

const [personName, setPersonName] = useState('');
const [personAge, setPersonAge] = useState('');
...

好处是：

您可以灵活地独立更改它们。
您不需要每次设置状态时都合并对象。

查看这个反应文档：https://reactjs.org/docs/hooks-state.html#tip-using-multiple-state-variables

【讨论】：

【解决方案2】：

使用delete从对象中删除变量

const newPerson=person;

if(newPerson.telephone===''){
 delete newPerson.telephone;
}

...otherchecks

setPerson(newPerosn)

【讨论】：