如何在ReactJS中遍历常量对象以重置表单状态

要把newPayee对象的所有值设为undefined来重置状态、清空表单，有两种实用方法：

方法一：手动构建重置对象 #

直接创建一个所有属性值为undefined的对象，匹配INewPayee类型即可：

const resetNewPayee = () => {
  setNewPayee({
    appUserId: undefined,
    fullName: undefined,
    phoneNumber: undefined,
    email: undefined,
    streetAddress: undefined,
    city: undefined,
    postalCode: undefined,
    stateId: undefined,
    bankId: undefined,
    bankAccountNo: undefined,
    bankInstitutionNo: undefined,
    transitNo: undefined,
    note: undefined
  });
};

方法二：动态遍历生成重置对象 #

如果对象属性较多，遍历现有newPayee的键批量设置undefined，不用手动逐个编写属性：

const resetNewPayee = () => {
  const resetObj = Object.fromEntries(
    Object.keys(newPayee).map(key => [key, undefined])
  ) as INewPayee;
  setNewPayee(resetObj);
};

特殊情况处理 #

如果appUserId需要保留初始值（比如userInfo.id），可以在重置后单独赋值：

const resetNewPayee = () => {
  const resetObj = Object.fromEntries(
    Object.keys(newPayee).map(key => [key, undefined])
  ) as INewPayee;
  resetObj.appUserId = userInfo.id;
  setNewPayee(resetObj);
};

使用时，把这个重置函数绑定到按钮的点击事件（比如<button onClick={resetNewPayee}>清空表单</button>），触发后状态更新，组件重新渲染，表单就会被清空。

内容的提问来源于stack exchange，提问作者Michael Harvey