如何根据React状态创建忽略零值/未更改状态的JavaScript对象

核心思路 #

把所有React状态打包成普通对象，过滤掉值为0的属性后，再转回目标格式的对象即可。

方法一：通用简洁写法（适合多状态场景） #

利用Object.entries和Object.fromEntries组合实现快速过滤：

// 生成只包含非0值的对象
const filteredState = Object.fromEntries(
  Object.entries({ bedroomCount, bathroomCount, parkingCount }).filter(
    ([_, value]) => value !== 0
  )
);

• 第一步：用{ bedroomCount, bathroomCount, parkingCount }将React状态合并为普通对象
• 第二步：Object.entries把对象转成[键名, 值]格式的数组
• 第三步：filter筛掉值为0的数组项
• 第四步：Object.fromEntries把过滤后的数组重新转回对象

方法二：手动构建（适合少状态场景） #

如果状态数量不多，手动判断构建对象更直观：

const filteredState = {};
if (bedroomCount !== 0) filteredState.bedroomCount = bedroomCount;
if (bathroomCount !== 0) filteredState.bathroomCount = bathroomCount;
if (parkingCount !== 0) filteredState.parkingCount = parkingCount;

组件内使用示例 #

import { useState } from 'react';

function PropertyFilter() {
  const [bedroomCount, setBedroomCount] = useState(0);    
  const [bathroomCount, setBathroomCount] = useState(0);
  const [parkingCount, setParkingCount] = useState(0);

  // 实时生成过滤后的对象
  const filteredState = Object.fromEntries(
    Object.entries({ bedroomCount, bathroomCount, parkingCount }).filter(
      ([_, value]) => value !== 0
    )
  );

  return (
    <div>
      <div>
        <button onClick={() => setBedroomCount(bedroomCount + 1)}>卧室+1</button>
        <span>当前：{bedroomCount}</span>
      </div>
      <div>
        <button onClick={() => setBathroomCount(bathroomCount + 1)}>浴室+1</button>
        <span>当前：{bathroomCount}</span>
      </div>
      <div>
        <button onClick={() => setParkingCount(parkingCount + 1)}>车位+1</button>
        <span>当前：{parkingCount}</span>
      </div>
      <h3>过滤后的结果：</h3>
      <pre>{JSON.stringify(filteredState, null, 2)}</pre>
    </div>
  );
}

export default PropertyFilter;

调整状态后，filteredState会自动更新，只保留值不为0的属性，完全符合你需要的输出格式。

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