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

作者

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

Find and render Object in Array using React.js

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

  1. 调用find()数组上的方法，向其传递一个函数。
  2. 该函数应返回对相关属性的相等性检查。
  3. 该find()方法返回数组中满足条件的第一个值。
应用程序.js
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。

如果条件返回true，则该find()方法返回相应的对象并短路。

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

没有浪费的迭代，因为一旦满足条件，该方法就会短路并返回对象。 find()

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

应用程序.js
  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

这就是我们使用逻辑 (&&) 运算符的原因 – 检查found变量是否存储真值。

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

应用程序.js
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，无论条件满足多少次，该方法都会遍历整个数组。

这样，我们就可以从对象数组中获取满足条件的多个对象。

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

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

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

–

发表评论