React：如果 prop 的一部分不可用，有没有办法避免类型错误？答案

【问题标题】：React: Is there a way to avoid type errors if a part of a prop isn't available?React：如果 prop 的一部分不可用，有没有办法避免类型错误？
【发布时间】：2018-09-20 21:31:17
【问题描述】：

我正在传递一个数据数组作为道具，我正在映射内容。

父组件

getDefaultProps: function() {
  return {
    dataArrays: [0,0,0],
}

<ChildComponent 
   dataArrays = {this.props.dataArrays}
    name = {this.props.name}
/>

子组件

this.props.dataArrays.map((block, index) => (
   <div className={index}>
       {block.fullName}
   </div>

我通常从 api 传递道具，所以这很好，但是如果数据由于某种原因没有返回，我试图让它仍然使用默认道具正确呈现。如果我不传递道具，{block.fullName} 将失败，因为 fullName 嵌套在该道具中，而不是直接作为道具。有没有办法做类似的事情：`{block.fullName || “不可用”}

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

The logical && operation 是在尝试评估对象属性之前检查对象是否存在的常用方法：

// In this case, will evaluate to undefined if block is falsey
this.props.dataArrays.map((block, index) => (
   <div className={index}>
       {block && block.fullName}
   </div>
));

另一种方法是在你的函数中定义一个default parameter，以保证它具有一定的价值：

// In this case, block will be a default object if the parameter is falsey
this.props.dataArrays.map((block = {fullName: "Not Available"}, index) => (
   <div className={index}>
       {block.fullName}
   </div>
));

另一种方法是ternary conditional:

// In this case, if block is falsey it will evaluate to "Not Available"
this.props.dataArrays.map((block, index) => (
   <div className={index}>
       {block ? block.fullName : "Not Available"}
   </div>
));

【讨论】：

【解决方案2】：

另一个答案是一些不错的选择，但为什么不先清理数据呢？

this.props.dataArrays
  .map((block) => (block && block.fullName) ? block : { fullName: 'Not Available' })
  .map((block, index) => (
    <div className={index}>
      {block.fullName}
    </div>
  ))

有没有办法做类似的事情：{block.fullName || “不可用”}

或者，这是对上述问题的直接回答：是你想要做的事情的语法是在JavaScript中proposed，你现在可以通过@使用它987654322@。它被称为可选链接运算符。

this.props.dataArrays
  .map((block, index) => (
    <div className={index}>
      {block?.fullName || 'Not Available'}
    </div>
  ))

请注意，这只是一个提议，可能不会纳入语言规范。正如我所说，我相信这里真正的解决方案只是在进入渲染逻辑之前清除错误值的数据。

【讨论】：

太棒了——我喜欢这个提议。希望它成功！