Question

在 React 中检查对象属性是否存在的逻辑？

2021-06-25

2391

javascript reactjs

我有一个 JSON 对象数组 (items.[{},{},{}])，我将其映射为“item”，然后从存储在属性 item.volumeInfo.imageLinks.thumbnail 中的 URL 呈现 JSX 图像。在大多数情况下，“缩略图”存在，但有时不存在（如果没有图像），所以我首先要检查它是否存在，并且只有在存在的情况下才尝试渲染图像。

当我尝试测试未定义（ if (item.volumeInfo.imageLinks.thumbnail !== undefined) ）时，我收到错误 (TypeError): 无法读取未定义的属性“缩略图” （嗯，是的，这就是我进行测试的原因！）

所以我尝试使用“in”，但现在我的代码什么都不做，没有错误但也没有渲染...有什么提示吗？

this.state.jsonArray.map(item => {
  if ('thumbnail' in item) {
    return <img src={item.volumeInfo.imageLinks.thumbnail} />
  }
})

Answer 1

(TypeError): 无法读取未定义的属性“缩略图” 意味着在您正在映射的某些项目上， item.volumeInfo.imageLinks 未定义。

So I tried using 'in', but now my code just does nothing at all, no error but no render either...

这是因为 thumbnail 属性位于 item.volumeInfo.imageLinks 对象中，而不是根 item 对象中，因此此条件始终为假，并且映射回调不会返回任何内容。

我将首先按具有缩略图属性的项目进行过滤，然后再映射。不要忘记包含一个 React 键（除了数组索引之外的任何内容都可以，只要它在数据中是唯一的），因此如果/当映射状态更新时，重新渲染就会起作用。

this.state.jsonArray
  .filter(item => item.volumeInfo?.imageLinks?.thumbnail)
  .map(item => (
    <img key={item.id} src={item.volumeInfo.imageLinks.thumbnail} />
  ))

如果您无法使用可选链接，请使用常规的空检查。

this.state.jsonArray
  .filter(item => {
    return item.volumeInfo &&
      item.volumeInfo.imageLinks &&
      item.volumeInfo.imageLinks.thumbnail;
  })
  .map(item => (
    <img key={item.id} src={item.volumeInfo.imageLinks.thumbnail} />
  ))

Answer 2

使用 可选链接运算符 (?.)

this.state.jsonArray.map(item => {
   if (item?.volumeInfo?.imageLinks?.thumbnail) {
    return <img src={item?.volumeInfo?.imageLinks?.thumbnail} />
   }
})

如果项目的任何属性未定义，则可选链接将返回 undefined 。