使用 React.js 在数组中查找和渲染对象

在 React 中查找数组中的对象:

  1. 在数组上调用 find() 方法,并传递给它一个函数。
  2. 该函数应返回对相关属性的相等检查。
  3. find() 方法返回数组中满足条件的第一个值。
const App = () => {
  const arr = [
    {id: 1, country: 'Austria'},
    {id: 2, country: 'Germany'},
    {id: 3, country: 'Austria'},
  ];

  // ✅ Find first object that matches condition
  const found = arr.find(obj => {
    return obj.id === 1;
  });

  // 👇️ {id: 1, country: 'Austria'}
  console.log(found);

  // -----------------------

  // ✅ Find multiple objects that satisfy condition
  const filtered = arr.filter(obj => {
    return obj.country === 'Austria';
  });

  // 👇️ [{id: 1, country: 'Austria'}, {id: 3, country: 'Austria'}]
  console.log(filtered);

  return (
    <div>
      {/* 👇️ render single object */}
      {found && (
        <div>
          <h2>id: {found.id}</h2>
          <h2>country: {found.country}</h2>
        </div>
      )}

      <hr />

      {/* 👇️ render array of objects */}
      {filtered.map(obj => {
        return (
          <div key={obj.id}>
            <h2>id: {obj.id}</h2>
            <h2>country: {obj.country}</h2>
          </div>
        );
      })}
    </div>
  );
};

export default App;

代码示例展示了如何:

  1. 在数组中查找第一个符合条件的对象
  2. 查找满足条件的多个对象

我们传递给 Array.find() 方法的函数会针对数组中的每个元素(对象)进行调用,直到它返回真值或遍历整个数组。

在每次迭代中,我们检查对象的 id 属性是否等于 1。

当我们只需要获取第一个符合特定条件的对象时,这非常方便。

如果我们传递给 find 方法的回调函数从未返回真值,则 find 方法返回 undefined。

const arr = [
    {id: 1, country: 'Austria'},
    {id: 2, country: 'Germany'},
    {id: 3, country: 'Austria'},
  ];

  const notFound = arr.find(obj => {
    return obj.id === 123;
  });
  console.log(notFound); // 👉️ undefined

这就是我们使用逻辑 && 运算符的原因 – 来检查找到的变量是否存储了真值。

使用 filter() 方法在 React 的数组中查找多个满足条件的对象。 filter() 方法接受一个函数作为参数,并返回一个仅包含满足条件的元素的数组。

const App = () => {
  const arr = [
    {id: 1, country: 'Austria'},
    {id: 2, country: 'Germany'},
    {id: 3, country: 'Austria'},
  ];

  // ✅ Find multiple objects that satisfy condition
  const filtered = arr.filter(obj => {
    return obj.country === 'Austria';
  });

  // 👇️ [{id: 1, country: 'Austria'}, {id: 3, country: 'Austria'}]
  console.log(filtered);

  return (
    <div>
      {/* 👇️ render array of objects */}
      {filtered.map(obj => {
        return (
          <div key={obj.id}>
            <h2>id: {obj.id}</h2>
            <h2>country: {obj.country}</h2>
          </div>
        );
      })}
    </div>
  );
};

export default App;

我们传递给 Array.filter() 方法的函数会被数组中的每个元素调用。

换句话说,我们过滤数组以仅包含满足条件的对象。

如果我们传递给 filter 方法的回调函数从不返回真值,则 filter 方法返回一个空数组。

我们可以使用 Array.map() 方法在我们的 React 组件中渲染对象数组。