在 React 中使用 find() 方法

作者

在 React 中使用 find() 方法

Using the find() method in React

在 React 中使用 find() 方法：

  1. 调用find()数组。
  2. 在每次迭代中，检查元素是否匹配条件。
  3. 渲染结果。
应用程序.js
const App = () => {
  const employees = [
    {id: 1, name: 'Alice'},
    {id: 2, name: 'Bob'},
    {id: 3, name: 'Carl'},
  ];

  const found = employees.find(element => {
    return element.id === 2;
  });

  console.log(found); // 👉️ {id: 2, name: 'Bob'}

  return (
    <div>
      <div>{found && <h2>{found.name}</h2>}</div>
    </div>
  );
};

export default App;

我们传递给
find
方法的函数被数组中的每个元素调用。

如果回调函数返回真值，则该方法会短路并返回相应的数组元素。

如果回调函数从不返回真值，则该find()方法返回
undefined。

在示例的函数中，我们检查id对象的属性是否等于2并返回结果。

应用程序.js
const found = employees.find(element => {
  return element.id === 2;
});

console.log(found); // 👉️ {id: 2, name: 'Bob'}

如果条件永远不会满足，该find()方法将返回undefined，因此我们需要在尝试访问对象的属性之前进行检查。

应用程序.js
<div>
  <div>{found && <h2>{found.name}</h2>}</div>
</div>


在访问对象的属性
之前，我们使用了
逻辑与 (&&)运算符，因为如果变量存储一个值，我们会得到一个运行时错误。namefoundundefined

如果左边的值为真，则逻辑 AND (&&) 运算符返回右边的值。

如果found变量存储一个undefined值，运算符将返回
undefined。

我们可以使用这种方法，因为
布尔值、null 和 undefined 都被忽略了。他们根本不渲染。

以下 JSX 表达式均不呈现任何内容。

应用程序.js
<div />

<div></div>

<div>{false}</div>

<div>{null}</div>

<div>{undefined}</div>

<div>{true}</div>

–

发表评论