Question

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

ParentComponent

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

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

ChildComponent

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

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

Answer 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>
));

Answer 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中要执行的操作 is proposed的语法，您现在可以使用它通过babel。称为可选链接运算符。

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

请注意，这只是一个建议，可能不会纳入语言规范。就像我说的那样，我相信真正的解决方案是在进入渲染逻辑之前清除虚假值的数据。

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

2 个答案: