检查元素是否存在于 React 的数组中

在 React 中检查数组中是否存在元素

Check if an Element exists in an Array in React

在 React 中检查一个元素是否存在于数组中：

使用该includes()方法检查数组中是否存在原语。
使用该some()方法检查数组中是否存在对象。

应用程序.js


import {useState} from 'react';

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

  // 👇️ check if array contains object
  const isFound = employees.some(element => {
    if (element.id === 1) {
      return true;
    }

    return false;
  });

  if (isFound) {
    console.log('✅ array contains object with id = 1');
  }

  const [fruits, setFruits] = useState(['apple', 'banana']);

  // 👇️ check if array contains primitive (string or number)
  if (fruits.includes('apple')) {
    console.log('✅ array contains apple');
  }

  return (
    <div>
      {employees.map(employee => {
        return (
          <div key={employee.id}>
            <h2>id: {employee.id}</h2>
            <h2>name: {employee.name}</h2>
          </div>
        );
      })}

      <hr />

      {fruits.map((fruit, index) => {
        return (
          <div key={index}>
            <h2>{fruit}</h2>
          </div>
        );
      })}
    </div>
  );
};

export default App;

第一个示例显示如何检查数组中是否存在对象。

应用程序.js


// 👇️ check if array contains object
const isFound = employees.some(element => {
  if (element.id === 1) {
    return true;
  }

  return false;
});

if (isFound) {
  console.log('✅ array contains object with id = 1');
}

我们传递给
Array.some
方法的函数将使用数组的每个值进行调用。

如果它至少返回一次真值，则该Array.some方法短路并返回true。

在我们的条件中，我们验证对象的标识符属性是否等于特定值。如果是，我们就知道该对象存在于数组中。

第二个示例使用
Array.includes
方法检查数组中是否包含原始值（字符串）。

应用程序.js


if (fruits.includes('apple')) {
  console.log('✅ array contains apple');
}

如果传入的值包含在数组中，则该includes()方法返回，否则返回。truefalse

–