React - 检查道具

Question

我有一个简单快速的问题。在很多情况下，我们必须检查 props 是否未定义。

嵌套的 props 怎么样，例如我们有：

this.props.data.income.data1.value.chartData

我们要检查chartData是否存在

它必须比

更好，更清晰

if(
this.props.data && 
this.props.data.income && 
this.props.data.income.data1 &&     
this.props.data.income.data1.value && 
this.props.data.income.data1.value.chartData!==null
)

我不能只检查 this.props.data.income.data1.value.chartData!==null

请告诉我你是如何在你的项目中解决这个问题的？

Answer 1

可以有多种方法来解决这个问题。

1. 您可以使您的组件依赖于道具值。即如果对象正在呈现，则暗示不需要对数据对象进行广泛检查，因为它们已经存在。
2. 您可以在每个组件上定义新的道具，这些道具只是所有道具值的细分。我不建议这样做，因为这意味着您需要处理多个 props 对象的验证。
3. 最后，可能将您的数据结构分解成更简单的东西。

Answer 2

我喜欢使用lodash's _.get()。

您可以在对象中搜索任意深度，如果那里没有任何内容，它不会引发错误。使用您的示例：

_.get(this.props.data, 'income.data1.value.chartData')

如果没有 income、data1、value 或 chartData，则返回 chartData 或 undefined

Answer 3

看看optional chaining - 你目前需要使用 babel 插件才能使用它，但建议是让这种方法在原生 JS 中可用。它允许您像这样引用对象属性：

this.props.data?.income?.data1?.value?.chartData?

是否有任何以? 结尾的属性可能不存在。

Answer 4

这就是我在这种情况下所做的：

((((this.props.data || {}).income || {}).data1 || {}).value || {}).chartData !== null

这基本上将每个对象属性一一分解。通过执行[property] || {}，您正在检查property 是否存在，否则创建一个空对象，以便下一次检查不会引发错误。

如果您想知道为什么会这样，请考虑以下示例：

const a = {b: "foo bar"};

a.b // "foo bar"
a.c // undefined
a.c.d // ERROR!

这里，c 不是对象a 的有效键，所以你得到undefined 仍然可以。但是，您不能为不存在的对象 c 请求密钥 d。那是你得到错误的时候。

要解决这个问题，您可以创建一个新对象 {} 并进行处理。它是一个空对象，所以它总是会返回undefined，但是通过一次执行这个级别，您将永远不会出错。

不是一个视觉上漂亮的解决方案，但它确实为您节省了几行代码。

Answer 5

你可以使用下划线js。您可以将此作为参考http://underscorejs.org/#has

_.has(object, key)
Does the object contain the given key? Identical to object.hasOwnProperty(key), but uses a safe reference to the hasOwnProperty

_.has({a: 1, b: 2, c: 3}, "b");
=> true

同样你可以这样使用

_.has(this.props, "data")
it will return either true or false.