Question

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

嵌套道具怎么样，例如我们有：

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

我是使用lodash's _.get()的粉丝。

您可以在对象中搜索尽可能深的内容，如果没有任何内容，则不会抛出错误。要使用您的示例：

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

如果没有undefined，income，data1或value

，

会返回chartData或chartData

Answer 2

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

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

以?结尾的任何属性都可能不存在。

Answer 3

这个问题有多种方法。

您可以使组件依赖于道具值.i.e。如果一个对象正在渲染，则暗示不需要对数据对象进行大量检查，因为它们已经存在。
您可以在每个组件上定义新的道具，这些道具只是所有道具值的细分。我不推荐这个，因为这意味着你需要处理多个道具对象的验证。
最后，可能会将您的数据结构细分为更简单的内容。

Answer 4

您可以使用下划线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.

Answer 5

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

((((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仍然可以。但是，您无法为不存在的对象d请求密钥c。那是你收到错误的时候。

要解决此问题，您可以创建一个新对象{}并对其进行处理。它是一个空对象，因此它将始终返回undefined，但是通过一次执行此级别，您将永远不会收到错误。

不是一个视觉上相当不错的解决方案，但它确实为您节省了几条线。

反应 - 检查道具

5 个答案: