JavaScript检测state对象keypad属性并控制DOM元素显隐的实现问题

错误写法问题说明 #

你之前尝试的写法不生效的核心原因如下：

• includes/some/filter都是数组专属方法，普通JS对象没有这些方法，直接对state对象调用会直接报错
• Object.values(state).includes("keypad")是检测state的值中有没有字符串keypad，而你的业务逻辑是检测state的键为keypad的属性，逻辑完全不匹配

你写的删除state中值为undefined的键的逻辑不会影响检测，因为你配置的setState中keypad的赋值都是布尔值true，不会出现值为undefined的情况，不会被误删。初始化时keypad不存在也不会导致问题，属性不存在时读取会返回undefined，布尔判断时会被认定为假值，不会误触发隐藏逻辑。

动态控制显隐的解决方案 #

你只需要在每次更新state后调用检测函数，直接判断keypad的布尔值即可，最简写法如下：

const x = document.getElementById('Music');

// 状态更新后调用此方法同步DOM显隐
function check() {
  // keypad为true时隐藏元素，其他情况（属性不存在/值为false）显示元素
  x.style.display = state.keypad ? 'none' : 'block';
  console.log('fired');
}

如果需要更严谨的属性存在校验，避免原型链属性干扰，可以用标准的Object.hasOwn方法做判断：

function check() {
  if (Object.hasOwn(state, 'keypad') && state.keypad === true) {
    x.style.display = 'none';
  } else {
    x.style.display = 'block';
  }
  console.log('fired');
}

注意要把check()的调用放在每次执行state = Object.assign(state, option.setState)更新状态的逻辑之后，才能保证界面和状态实时同步。

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