在 React.js 中获取数组的第一个元素

Get the First element of an Array in React.js

在 React 中使用方括号获取数组的第一个元素，例如
const first = arr[0];. 索引处的数组元素是数组0中的第一个元素。如果数组为空，undefined则返回一个值。

应用程序.js


import {useState} from 'react';

const App = () => {
  const [state, setState] = useState([
    {id: 1, name: 'Alice'},
    {id: 2, name: 'Bob'},
  ]);

  const first = state[0];

  return (
    <div>
      <h2>id: {first?.id}</h2>
      <h2>name: {first?.name}</h2>
    </div>
  );
};

export default App;

我们访问索引处的元素0以获取数组的第一个元素。

索引在 JavaScript 中是从零开始的，因此数组中的第一个元素的索引为0，最后一个元素的索引为。 arr.length - 1

请注意，在访问 index 处的数组元素的属性时，我们使用了
可选的链接 (?.)0运算符。

null如果引用为空值（或），则可选链接 (?.) 运算符会短路undefined。

换句话说，如果first变量存储一个值，我们将短路而不是尝试访问值的属性并得到运行时错误。 undefinedundefined

您也可以使用if语句。

应用程序.js


import {useState} from 'react';

const App = () => {
  const [state, setState] = useState([
    {id: 1, name: 'Alice'},
    {id: 2, name: 'Bob'},
  ]);

  const first = state[0];

  // 👇️ Make sure first is not undefined
  if (first != undefined) {
    console.log(first.id);
    console.log(first.name);
  }

  return (
    <div>
      <h2>id: {first?.id}</h2>
      <h2>name: {first?.name}</h2>
    </div>
  );
};

export default App;

这是必要的，除非您确定数组不为空。

如果您尝试在不存在的索引处访问数组，您会得到一个
undefined值。

应用程序.js


const arr = [];

console.log(arr[0]); // 👉️ undefined

如果您尝试访问一个属性或调用一个undefined值的方法，您将收到运行时错误。

–