如何动态检查对象中是否存在属性？答案

【问题标题】：How to dynamically check if a property exists in an object?如何动态检查对象中是否存在属性？
【发布时间】：2021-10-08 01:58:39
【问题描述】：

动态我的意思是这个道具不会是相同的，这取决于我从哪里检查它。比如我有这个钩子：

export const useErrorBorder = (fieldName: string) => {
  const { formState: { errors } } = useFormContext()
  const colors = { clean: 'blue.500', error: 'red.500' }

  let showErrorBorder = colors.clean

  if (errors && Object.keys(errors)?.length && fieldName) {
    showErrorBorder = colors.error
  } else {
    showErrorBorder = colors.clean
  }

  if (!fieldName) {
    showErrorBorder = 'inherit'
  }

  return showErrorBorder
}

我需要检查 fieldName 是否存在于来自 useFormContext 钩子的 formState 的 errors 对象中。

所以当我调用这个钩子时，我是这样使用的：

  const handleErrorHook = useErrorBorder(
    Object.keys(errors)?.length ? errors?.logic[conditionIndex]?.skipQuestionsSelect : '',
  )

或者取决于我是否在另一个组件上调用它：

  const handleErrorHook = useErrorBorder(
    Object.keys(errors)?.length ? errors?.logic[conditionIndex]?.scenarios[scenarioIndex]?.operator : ''
  )

<Comp focusBorderColor={handleErrorHook?.showErrorBorder || 'inherit'}` />

您注意到skipQuestionsSelect 不在scenarios 数组中。并且，当skipQuestionsSelect 或operator 为空时，它们将被移除其位置

所以我收到如下错误：

那么避免这个错误的最佳解决方案是什么？

【问题讨论】：

你为什么不用Object.keys(obj).includes('key')？
您的错误是引用了您没有（完全）包含在问题中的代码？此外，即使屏幕截图看起来不错，（也）将您的错误包含在代码块中。
这能回答你的问题吗？ How to check if object property exists with a variable holding the property name?

标签： javascript arrays reactjs typescript ecmascript-6

【解决方案1】：

你的 optional chaining 不是你的 errors?.logic[conditionIndex]?.scenarios[scenarioIndex]?.operator 位。

如果您想选择具有[key] 访问权限的链，请使用?.[key]，例如errors?.logic?.[conditionIndex]?.scenarios?.[scenarioIndex]?.operator.

【讨论】：

【解决方案2】：

在 Javascript 中有两种访问对象属性的方法，即点表示法：something.bar 或括号表示法：something['bar'] 使用括号表示法，您可以通过括号内键的字符串值动态访问对象属性。

因此，在您的情况下，您将密钥存储在变量中，因此您只需将带有密钥名称的变量放在括号内，如下所示：

var objectKey = 'someKey';
var objectWithSomeKey = {
  someKey: 'Hello'
};

console.log(objectWithSomeKey[objectKey]);

【讨论】：