Question

我正在将数据从数组传递到react组件。值之一为空，并且该对象正确地未定义。我尝试了一件事，但是在此设置中不起作用。...我将personId和secondpersonId传递给我的个人资料组件。如果此人没有secondpersonId，则会创建未定义的内容。

<Profile person={{ 
personid: firstperson[0].personId,
secondpersonid: secondperson[0].secondpersonId,
}} />

我已经尝试过使用secondpersonId ...

<Profile person={{ 
personid: firstperson[0].personId,
secondpersonid: (secondperson[0].secondpersonId || 'No id'),
}} />

但是它仍然抱怨它无法读取undefined属性。它的secondperson[0]数组不存在。

Answer 1

您可以像这样使用ternary运算符：

<Profile person={{ 
personid: firstperson[0].personId,
secondpersonid: ((secondperson && secondperson[0]) ? secondperson[0].secondpersonId : 'No id'),
}} />

Answer 2

如我的评论中所述，您需要检查第二人称

secondpersonid: (secondperson ? secondperson[0].secondpersonId : 'No id'),

Answer 3

您可以像这样尝试使用JS的ternary operator：

<Profile person={{ 
  personid: firstperson[0].personId,
  secondpersonid: (secondperson[0] ? secondperson[0].secondpersonId : 'No id'),
}} />

或者，您可以像这样利用JS的Logical AND(&&)和Logical OR(||)运算符的功能：

<Profile person={{ 
  personid: firstperson[0].personId,
  secondpersonid: (secondperson[0] && secondperson[0].secondpersonId) || 'No id'),
}} />

传递一个空的道具（没有api值）来响应组件

3 个答案: