无法获取数组的第一个元素，而 map() 作为一种魅力

Question

在 React 组件中想要打印出对象的值（“名称”），它是数组中的第一个元素：

"production_countries": [
  {
    "iso_3166_1": "US",
    "name": "United States of America"
  }
]

此代码使应用崩溃并出现错误 TypeError: Cannot read properties of undefined (reading 'name')：

<p>
  {
    movie.production_countries &&
    movie.production_countries[0].name
  }
</p>

但是，如果我用 .map() 替换上面的代码，一切都很好。

<p>
  {movie.production_countries &&
    movie.production_countries?.map((country, i) => (
      <span key={i}>
        {country.name}
      </span>
    ))}
</p>

如何获取数组的第一个元素？谢谢

Answer 1

production_countries 可能是一个空数组，在这种情况下 [0] 将 return 未定义，使用 ? 早期 return 应该有效：

{
  movie.production_countries &&
  movie.production_countries[0]?.name
}

无法获取数组的第一个元素，而 map() 作为一种魅力

Cannot get the first element of array whereas map() works as a charm

javascript

iteration

loops

typescript

reactjs